How to use the Text Overlay Contrast Checker
- Choose an image. Pick a photo or graphic from your device. It is read by your browser only and is never uploaded.
- Place the text. Choose one of nine positions and a block size so the highlighted box covers where your words will sit.
- Set the text colour. Enter a hex colour, or use the black and white buttons. Type your overlay text to see it in the preview.
- Read the result. Compare the average and worst-case ratios with the AA and AAA lines for normal and large text.
- Apply the scrim. Switch the scrim on at the suggested opacity and watch the preview and the ratios update.
How the contrast is worked out
What the checker measures
The image is drawn onto a canvas and the rectangle you chose is read pixel by pixel. From those pixels the tool takes the mean colour, a pixel near the dark end and a pixel near the light end (the 2nd and 98th percentile by luminance, so a single stray speck does not decide the result). The text colour is then compared with the mean, and with whichever end of the range sits nearest to it in luminance, which is where the text is hardest to read.
The scrim is composited the way CSS composites a translucent layer, channel by channel in sRGB, and the ratios are recomputed on the scrimmed pixels. The preview shows the same overlay at the opacity you set.
The rules, with sources
Relative luminance and the contrast ratio follow the definitions in WCAG 2.2 (w3.org/TR/WCAG22): each sRGB channel is linearised, luminance is 0.2126 R plus 0.7152 G plus 0.0722 B, and the ratio is the lighter luminance plus 0.05 over the darker luminance plus 0.05. Thresholds come from success criterion 1.4.3 Contrast (Minimum) for AA and 1.4.6 Contrast (Enhanced) for AAA. Black on white gives 21 to 1, the top of the scale.
Limitations
The tool checks flat text colour over an image region. It does not model text outlines, drop shadows, blur, gradients on the text itself, video frames or the way an app re-compresses your upload. WCAG 1.4.3 is written for web content and is used here as a widely understood yardstick for text in pictures. The nine positions are approximations of where you place text in a design tool, so adjust the block size to match your layout.
Frequently asked questions
Why does the tool give two ratios for one image?
A photo is not one flat colour. The average ratio treats the patch behind your text as its mean colour. The worst-case ratio uses the darkest or lightest area behind the text, whichever sits closest to your text colour, because a single bright cloud under a white word is enough to lose that word. Aim to pass on the worst case.
What contrast ratio does WCAG ask for?
Success criterion 1.4.3 Contrast (Minimum) in WCAG 2.2 asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The enhanced level in criterion 1.4.6 asks for 7 to 1 and 4.5 to 1. Large text means 18 point, or 14 point bold, and above. The ratio is computed from the relative luminance of the two colours.
Is my image uploaded anywhere?
No. The file is drawn onto a canvas in your own browser and the pixels are read there. Nothing is sent to a server, so private photos and unreleased designs are fine to test.
What is a scrim and how is its opacity chosen?
A scrim is a flat layer of black or white laid between the photo and the text. The tool tries opacities from 0 to 100 percent in 1 percent steps and reports the first one that lifts the worst-case ratio to 4.5 to 1 (and the first one for 7 to 1). Light text gets a black scrim and dark text gets a white one. A mid grey text colour may not be rescued by any scrim, and the tool says so.
Why is #777777 on white shown as 4.48 to 1 and marked a fail?
Its ratio is just under 4.5, so it misses the AA line for normal text even though it looks fine to many people. The pass or fail is decided on the unrounded number, and the display rounds to two decimals. It passes for large text, which needs 3 to 1.
Does a pass here guarantee people can read my post?
No. Contrast is one factor. Font weight, size on a phone screen, text shadows, compression and the viewer's eyesight also matter, and the app can crop or cover parts of the picture with its own interface. Treat a pass as a necessary check, not a full accessibility review.