WCAG Contrast When Text Appears on Images

The marketing hero looked stunning — white headline on a mountain photo at sunset. The accessibility audit failed every breakpoint where the text drifted over bright sky. Contrast ratio 1.8:1. Legal pinged before launch.

Text on images is a design default and an accessibility trap. Photos change luminance pixel by pixel; WCAG wants predictable ratios.

WCAG basics for overlays

Contrast ratio — relative luminance difference between text and background.

| Text size | AA minimum | AAA minimum | | --- | --- | --- | | Normal (< 18pt / 14pt bold) | 4.5:1 | 7:1 | | Large (≥ 18pt / 14pt bold) | 3:1 | 4.5:1 |

"Large text" isn't "whatever looks big on desktop" — measure CSS pixels.

Why photos fail

• Sky, snow, sand blow highlights under white text
• Dark foliage eats black text
• Responsive reflow moves text over different image regions
• Compression artifacts change local contrast — Hero Image Weight Budget

Fix patterns that work

1. Scrim overlay

Semi-transparent rgba(0,0,0,0.5) or gradient bottom-to-top darkening. Measure contrast of text color vs effective scrim+image — sampling only the scrim color often suffices if opacity is high enough.

2. Solid badge / panel

Place headline in opaque card — highest pass rate, less cinematic.

3. Text stroke and shadow (insufficient alone)

text-shadow helps legibility slightly; doesn't reliably pass WCAG without underlying scrim. Don't rely on shadow as sole fix.

4. Choose image region in art direction

Crop photo so busy area isn't behind text — Crop Image. Design mobile crop separately.

5. Separate HTML text from decorative image

Best practice: real text in DOM, not text baked into Open Graph Image Sizing hero JPG. Screen readers and contrast tools need DOM text.

Testing workflow

1. Design at mobile, tablet, desktop breakpoints
2. Sample contrast at each — browser DevTools + contrast extension
3. Test with 200% zoom — text must not overlap unreadable regions
4. Automated scan (axe, Lighthouse accessibility) — catches some failures
5. User test with high brightness outdoor mobile

Open Graph and social images

OG images are often pure graphics with text — same contrast rules for brand compliance. [WCAG doesn't exempt social**] — exempt marketing from inclusion efforts.

Tool page heroes

Utility sites use screenshot heroes — Helpful Content on Tool Pages. Dark mode screenshots need contrast discipline — Dark Mode Screenshots PNG.

Image compression side effect

How Image Compression Affects Quality — banding in scrims can create false contrast readings; test post-compression.

Documentation screenshots

Compressing Screenshots for Documentation — annotated arrows need contrast on both light and dark UI regions.

Troubleshooting

Does WCAG apply to text on images? Yes. Text placed over images must meet contrast minimums against the effective background — usually the image area behind the text, including overlays. Decorative text in logos may have exceptions; body and headline text does not.

What contrast ratio is required for normal text? WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold+). Level AAA is stricter. Many jurisdictions reference AA as baseline for public sites.

How do I test contrast on variable photo backgrounds? Test worst-case region behind text — lightest and darkest areas the text might sit over if responsive layout shifts. Use contrast checker with sampled colors or tools that evaluate overlaid scrims as unified background.

Limitations

When not to use this approach

Conclusion

Scrim or panel behind hero text; test every breakpoint; never trust sunset photos to stay dark under white type.

WCAG contrast on images isn't anti-design — it's anti-unreadable. Sample the worst pixel behind your headline; fix before legal samples it for you.

Automated vs manual testing

axe and Lighthouse catch some contrast failures; gradient heroes need manual sampling at multiple breakpoints. Tools like Colour Contrast Analyser (CCA) eyedropper on overlaid scrim+image composite.

Design system tokens

Define --hero-scrim-opacity token in design system — designers don't hand-tune per page. Token tested once against brand photo set for AA compliance.

Legal risk context

ADA Title III web accessibility lawsuits increasingly cite contrast failures on marketing heroes — fixing contrast is cheaper than settlement for US-facing sites with significant revenue.