I put the offer text in white over a banner photo, and the tool does not check images. How can I make sure the text is readable?

Why checking the lightest spot is enough

A photo is not one colour, and its contrast changes from point to point, which is why the tool does not check images or gradients. With white text, though, there is a sound shortcut: the darker a spot behind the text, the higher its contrast with white. So the worst case is the lightest spot behind the letters. If that passes, everything darker passes too. With dark text it works the other way round, and you look for the darkest spot.

The steps

1. Export the banner as it will appear and open it in the Image color picker.
2. Click the lightest parts of the photo that sit behind the letters, such as sky, sand or a highlight, and copy the colour code.
3. Open the Color contrast checker, type #FFFFFF in 'Text color' and the code in 'Background color'.
4. If the line is a large heading, read 'AA large text', which needs 3:1; if there is small text such as offer terms, it needs 4.5:1.

Example: a banner for desert-themed products

• A light sand area of the photo, #C8B89A: white on it is 1.95:1, failing even the UI components check.
• A lighter patch of sand, #E8DCC8: white on it is 1.35:1, so the text all but disappears there.
• A mid-dark area, #8C6F4E: white on it is 4.67:1 and passes. But as long as lighter spots sit behind the same text, this pass is not enough.

Fix one: a solid band

Put a solid dark band behind the line, such as #3B2F2A, which suits sand tones. White on it gives 12.92:1 and passes every level. And this check is fully exact, because the background is now a single colour.

Fix two: a translucent dark overlay

If you want the photo to stay visible, the usual approach is a translucent black layer over it. The tool rejects a translucent background, because the result depends on what lies beneath. It does, however, composite a translucent text colour over the background, and you can use that to find the overlay's resulting colour:

1. Type the overlay colour in 'Text color' as 8-digit HEX, such as #000000B3 for a black layer at 70% opacity, and the lightest spot #C8B89A in 'Background color'.
2. A note appears saying the text colour is translucent (70% opacity) and was composited over the background, followed by the resulting colour #3C372E. Ignore the ratio shown at this step; it is not about your text.
3. Clear both fields and enter #FFFFFF as text and #3C372E as background: 11.81:1.

Try lower opacities to find the least you need: at 60% (#00000099) the result is #504A3E and white on it gives 8.79:1; at 50% (#00000080) it is #645C4D and white gives 6.60:1. Remember this is a calculation for the lightest spot only, and a passing ratio is about reading the colour, not the accessibility of the whole page.