Color Contrast Checker for WCAG

What the contrast ratio means

The ratio compares the relative luminance of two colors, from 1:1 for identical colors to 21:1 for black on white. It ignores hue and looks only at how light or dark each color is, which is why a red and a green of similar brightness can look different but still fail.

The ratio is the same whichever color is the text and whichever is the background, so you only need the two values.

The thresholds that matter

WCAG level AA, the level most organisations aim for, asks for 4.5:1 for normal text and 3:1 for large text. Large text means at least 24 pixels regular, or about 18.7 pixels bold. Level AAA raises this to 7:1 and 4.5:1. Non-text elements that people need to see, such as input borders, icons and focus indicators, need 3:1 against what surrounds them.

Passing is a minimum, not a guarantee of comfort. Thin fonts, small sizes and busy backgrounds can still be hard to read at 4.5:1.

Checking colors from a real design

The app checks a color against standard backgrounds: white, light grey, grey, dark grey and black. That covers the most common question, whether a text or icon color works on a light or a dark surface, and it shows a text, button and icon preview. It does not compare two arbitrary colors, so for a pair of custom brand colors use a two-color checker or your design tool's contrast feature as well.

Take the colors from a screenshot of the actual screen rather than from a design file: shadows, transparency and images behind text change the color people really see. Pick inside solid areas, not on the anti-aliased edges of letters, and check every state that matters, including hover, disabled, error and dark mode.

Fixing a pair that fails

Change lightness, not hue. Darken the text or lighten the background in small steps and check again until the ratio clears the threshold; the colors keep their character while gaining contrast. In the app, Adjust's HSB sliders change brightness alone and save the result as a new color you can check again.

If a brand color is too light for text on white, keep it for large headings, buttons with dark text, or decorative elements, and use a darker shade of the same hue for body text.

Contrast is not the only rule

Do not use color alone to carry meaning. Error states, links and charts should also have an icon, an underline, a label or a pattern, so someone who cannot tell two colors apart still understands the message. Naming the colors in a legend helps as well.

Frequently asked questions

Related color questions