Gray text on white looks fine on a designer's monitor, and then a user with a dim phone screen cannot read it. A color contrast checker gives you the number that settles the argument. Enter a text color and a background color, and the ratio appears as you type, for example 4.47:1 for the sample pair #777777 on white.
Reading the five pass/fail rows
Each row compares your ratio with one WCAG 2.x minimum. AA normal text needs 4.5, AA large text needs 3, AAA normal text needs 7 and AAA large text needs 4.5. The fifth row, user interface components and graphics, needs 3. Large text means 18 pt (24 px) or larger, or 14 pt (18.67 px) or larger in bold. The preview box shows normal text, large text and large bold text in your colors.
Why 4.496 fails
The tool cuts the ratio after two decimals. It does not round. So 4.496 shows as 4.49:1 and fails the 4.5 line. Rounding would show 4.50 and let a failing pair through. The sample pair shows this: the real value is about 4.478, so you see 4.47 and not 4.48.
Fixing a failing pair in four steps
- Type or pick the Text color. The text field and the color picker stay in sync.
- Type or pick the Background color. Use
#rgb,#rrggbborrgb(r, g, b). Anything else gets an inline error. - Read the ratio and the rows. If AA normal text fails, a box shows the nearest text color that reaches 4.5:1.
- Press Use this color to apply it, or press Swap colors to test light text on a dark background.
How the nearest color is found
The suggestion keeps the hue and the saturation of your text color. It changes only the lightness, in steps of 0.1 percentage points. The tool searches darker and lighter, and shows the closer result. For #777777 on white the answer is close to #767676, the lightest gray that passes on white.
What the checker cannot judge
It compares two opaque colors. Colors with alpha, such as rgba() or an 8-digit hex value, are not accepted. Text over a photo or a gradient has no single background, so check the worst spot yourself. The tool also does not know the font size or weight you really use. The large-text rows only tell you what would apply if the text were large.
What happens to your colors
The math runs in the page. No request is sent, and the tool does not store the colors. You can confirm this in the network panel of your browser developer tools.