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.
Your own hero image is the next step: check it free in the browser →
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)
- Load your image in the checker below — or choose A gradient and type in the two stops and the angle from your stylesheet, so a `linear-gradient` can be checked without screenshotting it first. It starts with a demo background so you can see how it works before you add anything.
- Click where your text sits on the image, or drag it there. Type the text and pick its colour.
- Read the ratio. It is measured against the lightest and darkest pixels right behind your letters — the worst case, not the average.
- Adjust the design until it passes: a translucent scrim, a darker crop, or a solid caption bar.
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. Your image is never uploaded.
Try it on your own image
This is the same tool as the standalone contrast checker, running right here — background mode included. Nothing to install, no account, and the image stays in your browser.
Click anywhere on the image (or drag) to position the selected text. Use Move this text in a result to choose which one the click moves. Drop an image file here, or paste one (Ctrl+V), to load it.
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.
One contrast check is free. A report you can hand over is not.
The image check and the free Accessibility Scanner stay free forever — no account, no trial, no limit on how many images or pages you run through them.
What those tools do not give you is something you can send to a client or file with an accessibility statement: a written report that also covers the parts of WCAG only a server can see. Pro adds the GDPR/cookie and NIS2/security checks, and the report as a file you can attach.
| What you get | Free | EUComply Pro — $79/year per website |
|---|---|---|
| Text-on-image contrast check | yes, unlimited images | included |
| Page checks | the accessibility checks — 15 WCAG rules, contrast included | the same 15 rules |
| Result | score and grade for the page | included |
| The report | the whole report on the page | included |
| A report you can attach to an email | — | pdf download of the whole report as a file |
| Checks only a server can make | — | GDPR/cookie and NIS2/security checks — 18 more, 33 in all |
The licence covers one website. If you only need the contrast number for one image, you never need to pay for anything — the free tool above is the whole answer.
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.
Tools and guides
WCAG contrast checker: how to check color contrast
How to check color contrast against WCAG 2.1 AA and AAA for free: enter two colors, see the ratio instantly…
All free tools
7 Free Online Developer Text Tools
Seven free browser-based tools for developers: word counter, JSON formatter, text diff checker, case…
Website speed test — without Lighthouse
Run a fast website speed and health check from your terminal — no browser devtools, no Lighthouse install…