Free tool · Runs in your browser
Contrast for text over images, measured at every pixel
A colour picker samples one point of a photo. Text over an image has to pass against all of them. Mark the text in a screenshot and this tool scores it against every background pixel, shows where it fails, and works out the overlay that fixes it. The image is measured in your browser and never uploaded.
Start with an image
Choose, drop or paste a screenshot or design export (PNG, JPEG, WebP, GIF or AVIF, up to 40 MB). It is read in your browser and never uploaded.
Why the worst point decides it
WCAG 1.4.3 Contrast (Minimum) asks for a ratio between the text and its background: 4.5:1 for normal text, 3:1 for large text. It has no rule for averaging. On a flat colour there is one background, so one number. On a photo or a gradient the background changes under every letter, and the text has to meet the ratio against all of it. The part of the image with the least contrast is the part someone cannot read, so that is the number that passes or fails.
W3C documents this as a named failure, F83: background images that do not give foreground text enough contrast. It is an easy failure to miss: a design can pass a colour check because the text was checked against the image's average colour, or against the part of the image that shows at one screen width.
That is why the tool leads with the worst ratio. The share of the background that passes and the 5th percentile are there to show the size of the problem: a worst point of 2:1 with 98% passing is a small bright spot to cover; a 5th percentile below the threshold means the whole design needs an overlay or a different image.
How the measurement works
- The marked area is read at the image's own resolution. Areas over 4 megapixels are scaled down to 4 megapixels first, and the results say so. Transparent pixels are treated as white.
- The text colour is detected or set by you. Detection splits the area into light and dark groups and takes the most common colour of the group that is shaped like text: thin strokes that stay inside the area. Every pixel within the tolerance of the text colour counts as text.
- Background pixels within 2 pixels of the text are skipped, because anti-aliasing blends them with the letters.
- Every remaining pixel is scored with the WCAG 2 formula, the same one our contrast checker uses. The tool reports the worst ratio, the 5th percentile, the share that passes each threshold, where the failures are, and the APCA value at the worst point for reference.
Ways to fix text that fails over an image
| Fix | How | Good to know |
|---|---|---|
| Overlay (scrim) | A semi-transparent black or white layer between the image and the text | The tool gives the smallest opacity that passes. A gradient scrim that is darkest behind the text keeps more of the photo. |
| Panel behind the text | A solid or semi-opaque background on the text element itself | The same opacity as the overlay works, and the rest of the image is untouched. |
| Halo | A wide, dark text-shadow that surrounds every letter | Counts as the background only if it surrounds the letters fully. Measure a screenshot. |
| Move or recrop | Place the text over a calm, even part of the image | Check every breakpoint: background-size: cover crops differently at each width. |
| Change the text colour | White or near-black text | Mid-tone text leaves no room: no overlay can rescue it on a busy image. |
The text over images guide sets out each of these fixes with CSS you can copy. The criteria are 1.4.3 Contrast (Minimum) (AA), 1.4.6 Contrast (Enhanced) (AAA) and, for icons and graphics over images, 1.4.11 Non-text Contrast (AA). To see how a page looks with colour vision deficiency or blur, try the website vision simulator.
What the tool cannot tell you
- It separates text from background by colour. Where the background contains the text colour itself, those pixels count as text and are left out, so the result can be optimistic. Turn on the text tint to check.
- Text in more than one colour, gradient text and text with an outline need to be checked one colour at a time: set each colour and mark the letters that use it.
- It measures the screenshot you give it. A responsive page shows different parts of the image at different widths, and a carousel or video shows different frames, so check each one that carries text.
- Heavy JPEG compression adds noise around letters. Raise the tolerance if the letter edges show as failing, and prefer a PNG screenshot.
- Contrast is one requirement among several. Text that is part of the image file also needs to meet 1.4.5 Images of Text and have a text alternative.
Frequently Asked Questions
Why does the tool report the worst point instead of an average?
WCAG 1.4.3 has no averaging rule. Text needs the minimum ratio against the background it sits on, so when the background is a photo or a gradient, the part with the least contrast decides the result. An average can pass while a third of a headline is unreadable over a bright patch of sky. The tool still shows the share of the background that passes and the 5th percentile, which tell you whether a failure is a small spot or most of the area.
Is my image uploaded anywhere?
No. The image is read by your browser and measured there. Nothing is sent to our servers, so it is safe to check unreleased designs and screenshots of private pages.
Why are the pixels right next to the letters skipped?
Text is drawn with anti-aliasing: the pixels along each letter's edge are a blend of the text colour and the background. They are not background, and counting them would make almost any text look as if it fails. The tool skips background pixels within 2 pixels of a text pixel and measures everything else in the marked area.
How is the overlay opacity worked out?
The tool composites a black and a white overlay over every distinct background colour in the area, one percent of opacity at a time, exactly as a browser blends a semi-transparent layer, and reports the lowest opacity at which every point passes the threshold you chose. It assumes the words are live text on top of the overlay. If the words are part of the image file, the overlay darkens them too and the figure does not apply.
Does a text-shadow count towards contrast?
It can. W3C's guidance on 1.4.3 treats a wide border or halo that surrounds the letters as their background, so a dark halo can supply the contrast. A faint, blurred or offset shadow leaves parts of each letter against the image, which usually still fails. Take a screenshot with the shadow applied and measure it here.
Which ratio should I check against?
4.5:1 for normal text and 3:1 for large text (at least 24 px, or 18.66 px bold) under 1.4.3 at Level AA, and 7:1 and 4.5:1 under 1.4.6 at Level AAA. Icons and other graphics that carry meaning need 3:1 under 1.4.11. Logos and text that is purely decorative are exempt from 1.4.3.
Essential Accessibility Resources
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences