Text on Image Contrast Checker
Text on a photo is where accessibility fails. Get the real WCAG ratio behind your text — nothing is uploaded.
Check your text placement
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.
How it works: every letter of your text is sampled at its actual pixels — we read the background colors directly underneath the glyphs (text pixels excluded) and use the worst-case pair found. That worst-case ratio is what a reader with low vision actually experiences, so that is what WCAG measures. Choose A gradient instead of an image and the same measurement runs on the two stops and the angle you type in — so you can check the CSS gradient in your stylesheet without screenshotting it first. For plain color pairs, use the contrast checker; to see how the whole palette reads for color-blind users, try the color blindness simulator. To check an entire live page, run the free Accessibility Scanner.
The rules in short
- WCAG SC 1.4.3 requires 4.5:1 for normal text and 3:1 for large text (≥ 24 px regular or ≥ 18.66 px bold).
- SC 1.4.11 additionally requires 3:1 for meaningful UI parts and graphics.
- A gradient or busy photo can pass under half the letters and fail under the rest — always measure the worst case, not the average.
- If you fail: add a semi-transparent scrim behind the text, darken/lighten the image locally, or add a solid caption bar.
← All free tools · Contrast checker · Palette generator · Danish version · dansk guide
Ofte stillede spørgsmål
How is readability measured?
The tool computes WCAG-style contrast between your text color and representative background regions of the image, then flags areas where the ratio falls below 4.5:1 (normal text) or 3:1 (large text). It is an approximation — judge busy photographic areas visually too.
What is the fastest fix for unreadable text on an image?
Add a scrim: a semi-transparent dark overlay behind the text, or place text on a solid band. Both raise contrast dramatically without changing your image or brand colors.
Are my images uploaded?
No. Everything runs locally in your browser using canvas — the image file never leaves your device.
Does this matter for accessibility compliance?
Yes. WCAG 2.x requires 4.5:1 contrast for normal text regardless of background type, and the EU Accessibility Act pushes public-facing sites toward conformance. Text baked into images cannot be zoomed, translated or selected either — prefer real HTML text where you can.
This checker is free. Checking the whole site is not.
You have checked one image. Nothing on this page says whether the rest of the site passes — that needs the page read from the server, and it is what EUComply Pro does: EAA/WCAG, cookie consent and NIS2 findings in one report you can hand to a client. See every free tool.