What the four results mean
The contrast ratio compares how bright the two colours are, from 1:1 (identical) to 21:1 (black on white). WCAG, the accessibility guideline most laws and procurement rules point to, sets minimums depending on how big the text is:
| Result | Minimum ratio | Applies to |
|---|---|---|
| AA normal | 4.5:1 | Body text, labels, links. The usual legal baseline. |
| AA large / UI | 3:1 | Large text, plus icons, input borders and focus outlines |
| AAA normal | 7:1 | Stricter target for body text |
| AAA large | 4.5:1 | Stricter target for large text |
“Large” means at least 18 point, or 14 point bold. On the web that is about 24 px regular or 18.7 px bold. Most body text is smaller than that, so 4.5:1 is the number to remember.
Fixing a pair that fails
Under Suggested fixes, the tool keeps your hue and nudges lightness until the pair reaches 4.5:1 or 7:1. The result usually looks like the same colour, a little deeper or paler, so it fits the existing design. Press Apply on a suggestion to try it, then copy the new value with Copy FG or Copy BG.
Mid-tone backgrounds, like this orange, medium greens and bright blues, are where most failures happen: they are too light for white text and too dark for grey. Testing both black and white text against them before committing to a brand colour saves a redesign later.
Not just text
WCAG 2.2 also asks for 3:1 between interface parts and what’s next to them: the outline of a text field against the page, an icon-only button, the focus ring that shows keyboard users where they are, and lines in a chart that carry meaning. Light grey input borders on white are a classic miss. Logos and purely decorative graphics are exempt.
Colour blindness preview
The colour vision buttons simulate protanopia, deuteranopia, tritanopia and full colour blindness (achromatic). Contrast ratio doesn’t change with these, because it is based on brightness, but the preview shows whether you rely on hue alone. A red error and a green success message can look nearly identical with deuteranopia, which affects roughly 1 in 16 men in its milder forms. Add an icon or a word, not just a colour.
Questions
Why does #767676 come up so often?
It is the lightest neutral grey that passes 4.5:1 on white, at 4.54:1. One step lighter, #777777, fails at 4.48:1.
Does text on a photo or gradient count?
Yes. Check the text against the lightest part of the image behind it. Use the colour picker to sample that area, then test it here. A dark overlay behind the text is the usual fix.