Colour Contrast Checker

Using the Colour Contrast Checker

How the ratio is calculated

WCAG 2 compares the relative luminance of the two colours, a measure of perceived brightness, with the formula (lighter + 0.05) / (darker + 0.05). The result runs from 1:1 (identical colours) to 21:1 (black on white). The checker uses the exact formula from the guidelines.

The thresholds

Level AA, the usual legal and practical target, needs 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 and 4.5:1. Large text means at least 24px regular or about 18.7px bold. Icons, input borders and other essential graphics need 3:1 against their surroundings.

Fixing a failing pair

The quickest fix is usually to darken the text (or lighten it on a dark background) rather than changing the background. The suggestion button keeps the hue of your text colour and moves only its lightness until the pair passes AA for normal text, so the brand feel survives.

Beyond the ratio

Contrast is necessary but not sufficient. Very thin fonts, small sizes and text over images can still be hard to read at a passing ratio. Test real content, and never rely on colour alone to carry meaning, such as red for errors without an icon or text.

Frequently asked questions