WCAG Contrast When Text Appears on Images

White type on a sunset photo fails as soon as the headline moves onto bright sky. One marketing hero, a mountain photo at sunset, failed the accessibility audit at every breakpoint where the text drifted onto that sky: contrast ratio 1.8:1. Legal contacted the team before launch. WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text, measured against the pixels behind the letters, overlays included. Photos change brightness from pixel to pixel, and a responsive crop moves the headline onto a different patch. Crop Image can move the busy part of the photo away from the type. A scrim or a solid panel is the more reliable fix when the crop still shifts.

WCAG basics for overlays

Contrast ratio is the 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" means 18pt or larger, or 14pt bold or larger, measured in CSS pixels.

Why photos fail

• Sky, snow, and sand blow out the highlights under white text
• Dark foliage swallows black text
• Responsive reflow moves the text onto a different part of the image
• Compression artifacts change local contrast. See hero image weight budget

Fixes that pass

1. Scrim overlay

A semi-transparent rgba(0,0,0,0.5), or a gradient that darkens from the bottom toward the top. Measure the text color against the scrim and the image together. If the scrim opacity is high enough, sampling the scrim color alone is often enough.

2. Solid badge or panel

Put the headline on an opaque card. This pattern passes most often. It also looks less cinematic.

3. Text stroke and shadow

text-shadow helps legibility a little. It does not reliably pass WCAG without a scrim underneath. A shadow used as the only fix is a common miss.

4. Art-direct the image region

Crop the photo so the busy area sits away from the text. Use Crop Image, and design the mobile crop separately from the desktop crop.

5. Keep the words in HTML

Put real text in the DOM. Do not bake the headline into the hero JPG used for Open Graph image sizing. Screen readers and contrast tools need DOM text.

Testing workflow

1. Design the mobile, tablet, and desktop breakpoints
2. Sample contrast at each one, with browser DevTools and a contrast extension
3. Test at 200% zoom, and check that the text does not land on an unreadable region
4. Run an automated scan (axe, Lighthouse accessibility). These catch some failures
5. Try the page outdoors on a phone at high brightness

Open Graph and social images

OG images are often flat graphics with text on them. The same contrast ratios apply if you are holding the brand to the same standard. Social images are not carved out of WCAG, and a marketing hero is still in scope for inclusion work.

Tool page heroes

Utility sites often use a screenshot as the hero. Helpful content on tool pages covers the page around that image. A dark-mode screenshot needs the same contrast check. See dark mode screenshots PNG.

Compression can change the reading

How image compression affects quality: banding in a scrim can produce a false contrast reading. Test after compression, on the file you will actually ship.

Documentation screenshots

Compressing screenshots for documentation: arrows and labels need enough contrast on both light and dark parts of the UI.

Automated and manual testing

axe and Lighthouse catch some contrast failures. A gradient hero still needs a person to sample several breakpoints. Colour Contrast Analyser (CCA) can eyedropper the composite of scrim plus image.

Design system tokens

Set a --hero-scrim-opacity token in the design system so designers are not tuning opacity per page. Test that token once against the brand photo set for AA.

Legal risk

ADA Title III web accessibility lawsuits increasingly cite contrast failures on marketing heroes. For a US-facing site with significant revenue, fixing the contrast costs less than a settlement.

Limitations

A single pixel of a background photo is an unreliable sample. Responsive cropping changes which part of the photo sits behind the headline on mobile and on desktop. Use a consistent dark scrim, or put the text in a solid container, and sample the worst region at each breakpoint.