Color contrast checker for whole screenshots
Checking hex codes one pair at a time misses the line you forgot. Drop in a screenshot: every line of text gets its WCAG ratio, a verdict, and the nearest color that passes.
- Free, no signup
- Nothing is uploaded
- WCAG 2.2 AA and AAA
PNG, JPG or WebP at its real size. Or paste with Ctrl+V. A screen shrunk inside a device mockup has text too small to measure.
Results
Lines to fix
Lines that pass
Check two colors
Pick a text color and a background, or type hex codes. Use it to confirm a borderline line from a screenshot.
Contrast ratio
- Body text, AA4.5:1
- Body text, AAA7:1
- Large text, AA3:1
- Large text, AAA4.5:1
- Icons, input borders, focus rings3:1
What is a good color contrast ratio?
Contrast ratio compares how light two colors are, from 1:1 for the same color to 21:1 for black on white. WCAG 2.2 sets the minimums. Level AA, success criterion 1.4.3, is the one most laws and design systems ask for; level AAA, criterion 1.4.6, is the stricter target.
| What it is | AA | AAA |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text: 24px and up, or 18.66px bold | 3:1 | 4.5:1 |
| Icons, input borders, focus rings (1.4.11) | 3:1 | 3:1 |
| Logos and disabled controls | Exempt | Exempt |
A ratio that passes is a floor, not a goal. Contrast in design covers the other half: using contrast to say what matters most on the screen, which no ratio can check for you.
How do you check contrast on a whole screenshot?
The page finds the text with an OCR engine, Tesseract, running on your device. Before reading, it redraws the image so every pixel is dark by how far it sits from its local background, because pale text next to black text otherwise vanishes from the OCR pass entirely.
For each word it takes the background from a thin ring just outside the letters, and the text color from the pixels inside that differ most from that background. A line's ratio is the middle value of its words. A screenshot does not say how big it was on the real screen, so large text is judged against the body text in the same image: a line at least 1.45 times the body size gets the 3:1 large-text threshold.
For every failure it then searches for the nearest passing color: the same hue, moved darker or lighter until the pair clears the threshold with a little room to spare. It changes whichever side needs the smaller shift, so white text on an orange button gets a deeper orange rather than black text.
Questions
What is a good contrast ratio for text?
At least 4.5:1 for body text and 3:1 for large text to meet WCAG 2.2 level AA, and 7:1 and 4.5:1 for level AAA. Large text is 24px and up, or 18.66px and up in bold. Many designers aim for 7:1 on body text, which stays readable on a dim phone in sunlight.
How do I check the contrast of text on an image or gradient?
Upload a screenshot of it. For each word the checker takes the colors in a thin ring just outside the letters, and over a busy background it uses the background color closest to the text, which is the worst case a reader meets. A two-color checker cannot do this, because text on a photo has no single background color.
Why is a line marked borderline?
Anti-aliasing blends the edges of letters into the background, so a ratio measured from a screenshot reads slightly low. A line within 0.4 of its threshold is marked borderline rather than failing. Load its colors into the two-color checker and match them exactly with the picker to be sure.
Is my screenshot uploaded anywhere?
No. The text reader runs on your device. The page downloads the OCR engine, Tesseract, from jsDelivr the first time you use it, and after that it is cached. Your image never leaves your browser.
Does it check icons, buttons and input borders?
The screenshot check measures text only. For icons, input borders and focus rings, WCAG 2.2 criterion 1.4.11 asks for 3:1 against what is next to them: pick the two colors in the two-color checker and read the last row.
How is this different from the WebAIM contrast checker?
The two-color check here gives the same WCAG ratio. The difference is the screenshot check: it finds every line of text in a design at once, so you do not have to know in advance which pair to test, and it suggests the nearest color that passes for each failure.
Contrast is one part of legibility and one part of designing for accessibility. To go past contrast to hierarchy, emphasis and layout, try the AI design critique on the same screen.