Contrast on Image Checker

Try the Checker

Why Photos Break Contrast Math

A flat color background gives the contrast checker one easy job: compare two colors and return a number. A photo gives it a harder one, because the pixels behind any given line of text change as the line crosses the image. A headline that starts over sky and ends over foliage has a different effective contrast at each end, and a single ratio cannot describe either position precisely.

Designers solve this with structure rather than hoping the ratio works out. Text sits in a band with its own background, or on a scrim, or in a corner where the photo is reliably dark or light. The checker supports the same workflow: sample the actual patch the text will occupy, see the real ratio, and add the scrim until the verdict passes. That is a design decision backed by measurement instead of a guess.

The 9 by 9 sampling patch matters here. A single pixel on a textured photo can be nearly white or nearly black by chance, and a one-pixel reading produces a verdict that does not describe the region a letterform actually covers. Averaging a small patch around the click gives a stable, representative color that matches what the text will sit on in practice.

Design Patterns That Fix Image Contrast

The scrim is the workhorse. A dark gradient laid over the image, heavier toward the text, lifts the effective background darkness without hiding the photo. Because WCAG measures the blended result, a scrim is a legitimate part of the accessible solution, not a cheat. Start with a dark overlay around 30 to 50 percent opacity and raise it only as far as the verdict needs.

A text band is the more structural option: a solid or semi-transparent panel behind the copy that gives it a flat background. Bands read as a deliberate editorial choice and make the contrast calculation trivial, which is why they dominate magazine and news layouts. They also survive a swapped photo, because the band stays constant while the image behind it changes.

Color scrims go one step further and darken with the brand color instead of neutral black, which keeps the hero on-brand while fixing contrast. The same logic applies in reverse: light text over a light region is rescued by a light translucent scrim only when the text is dark. The checker makes each variant measurable, so the aesthetic choice and the accessibility pass happen in the same step.

How to Use the Checker

1. Start with the demo image to learn the workflow, or upload the actual photo your design uses.
2. Click the spot where the text will sit. For a worst-case reading, sample the lightest area if the text is dark and the darkest area if it is light.
3. Read the ratio and verdict. Adjust the text color until the verdict passes at the size you plan to ship.
4. If the color is not negotiable, add a scrim or a band behind the text and re-sample to confirm the new ratio.
5. Spot-check at least three points along a long headline, because the background varies under it.

The Math Behind the Verdict

The tool converts the sampled color and your text color to relative luminance, weighting each channel by how the human eye perceives it, then divides the brighter luminance by the darker one. The ratio is the same number the flat contrast checker computes, because WCAG defines one formula for every background, including images.

The threshold depends on the text size. Normal text needs 4.5:1, and large text, 24px or larger at regular weight, needs 3:1. The checker switches the threshold automatically when the preview size crosses that line, so the verdict always reflects the size you are actually shipping rather than a fixed assumption.

Common Image Contrast Failures

The most common failure is testing against the average color of the image. A hero photo can average out to a pleasant mid-tone while its corners are almost white, and text placed in the wrong corner fails badly. Sample where the text actually renders, not the image as a whole.

The second is relying on text shadows to carry the contrast. A shadow widens the dark region behind the letters but does not darken it enough on bright backgrounds, and WCAG evaluates the composite, which often lands below threshold. A scrim is the honest fix: it changes the actual background the text sits on.

The third is treating the verdict as permanent. Photos change between the mockup and production, and the same text color that passed on the art-directed crop can fail on the real asset. Re-check the final image, not the placeholder, and design the text block so it survives a slightly different photo. A one-line override for light and dark image variants keeps the heading legible in both worlds.

Where This Fits with the Other Tools

This tool is the image-aware companion to the contrast checker, which handles flat backgrounds and exports token pairs. The accessibility guide explains the WCAG rules this tool applies, and the color palettes provide verified background colors when the design moves off the photo. Test the final composition in the typography playground before export.

FAQ

Why is contrast on images harder than on flat backgrounds?

A flat background has one color, so one contrast calculation settles the question. A photo has thousands, and the pixels behind a line of text change along its length. The practical approach is to sample the worst case, usually the darkest or busiest patch under the text, and check against that.

Does the WCAG contrast rule apply to text over images?

Yes. The rule looks at the text and its background wherever the text is rendered, and an image is just another background. Scrims, overlays, and text shadows all count as part of the background, which is why designers use them: a dark scrim raises the effective contrast of white text on a bright photo.

What is a scrim and why does it help?

A scrim is a semi-transparent overlay, usually dark, placed between the image and the text. It darkens the pixels behind the text and makes the effective background more uniform. WCAG measures the blended result, so a scrim can legitimately carry a hero heading to AA without redesigning the photo.

How large does text need to be to qualify as large text?

WCAG defines large text as at least 18pt, about 24px, at regular weight, or 14pt, about 19px, at bold weight. Large text needs a 3:1 ratio for AA instead of 4.5:1. The checker switches its threshold when the preview size crosses 24px.

What if the image has light and dark areas?

Sample the lightest patch if you are using dark text, and the darkest patch for light text, because those are the areas where the contrast is weakest. Text positioned over a busy boundary between light and dark is the hardest case, and a scrim or a solid band behind the text fixes it.

Can I upload my own image?

Yes, and it never leaves your machine. The file input reads the image locally into a canvas, and all sampling and contrast math happen in your browser. There is no upload endpoint, which is also why the demo image is generated locally rather than served.

What does AA large text pass only mean?

It means the ratio sits between 3:1 and 4.5:1, which clears the WCAG bar for large text but falls short for normal body text. In that position you either keep the copy large, bold enough to count as large, or add a scrim and re-check until the normal-text threshold clears.

Should I check every text element over every image?

Only the ones a user can reach. A hero heading, a caption on a product photo, and a link on a card background all need checking, because each has a different image and size behind it. Decorative text that is purely presentational can be ignored, but when in doubt, check it, since the cost is a single click.