Why does text on images fail so often?
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.
The requirements
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.
The worst spot counts
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.
Your images stay local
The image is read and analyzed in JavaScript in your own browser via the canvas API. Nothing is uploaded to any server.
How to do it (under a minute)
- Open the free text-on-image contrast check.
- Drag in your image — or paste a screenshot of your design straight from the clipboard.
- Mark the area where the text sits and enter the text color.
- Read the result: worst-case and average contrast in the area, plus pass/fail for AA and AAA. Adjust the design until everything is green.
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.
From one image to a whole page
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.
More contrast help
The contrast checker tests color pairs · the palette generator builds accessible palettes.
Read the contrast guide
A step-by-step guide to the WCAG requirements themselves: WCAG contrast checker, step by step.
Frequently asked questions
Why does text on images fail so often?
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.
How much contrast is required?
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.
Is the tool free and safe to use?
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.
What do I do if it fails?
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.