Hero images with text on top are one of the most common accessibility failures. Here is how to check the actual contrast between your text and the pixels behind it — and what to do if it doesn't pass.
Updated August 2026 · 4 minute read
A photo rarely has uniform brightness under the whole text block. White text can be perfectly readable over the sky and completely disappear over the snow two centimeters further down. WCAG measures the contrast against the actual pixels behind each letter — not against the image average.
SC 1.4.3: 4.5:1 for normal text, 3:1 for large text (approx. 24 px normal / 18.66 px bold). SC 1.4.11 requires 3:1 for meaningful UI parts and graphics.
A gradient can pass under half the letters and fail under the rest. Always measure the worst case — that is exactly what a user with low vision hits.
The image is read and analyzed in JavaScript in your own browser via the canvas API. Nothing is uploaded to any server.
The tool reads pixels via the canvas API and computes relative luminance per the WCAG specification — the same formula commercial tools use. You get the same number an auditor will measure.
The contrast check tests one image at a time — perfect when designing a hero or banner. To check the contrasts across an entire site, use the free Accessibility Scanner: it goes through all text on an entire URL and finds low-contrast text along with heading, alt-text, form and keyboard errors.
The contrast checker tests color pairs · the palette generator builds accessible palettes.
A step-by-step guide to the WCAG requirements themselves: WCAG contrast checker, step by step.
A photo rarely has uniform brightness under the whole text block. Contrast can be fine over the dark areas and completely gone over the light ones. WCAG measures contrast against the actual pixels behind each letter — so you must test the worst case, not the average.
WCAG SC 1.4.3: at least 4.5:1 for normal text and 3:1 for large text (roughly 24 px normal or 18.66 px bold). SC 1.4.11 additionally requires 3:1 for meaningful graphics.
Yes. The image is analyzed in JavaScript directly in your browser via the canvas API. Nothing is uploaded to any server, and there are no limits or sign-up.
Add a semi-transparent dark or light overlay behind the text, darken/lighten only the area where the text sits, or move the text to a solid bar below the image. Re-test until every measurement passes.