What does the contrast ratio mean?
The contrast ratio is a number from 1:1 to 21:1 that says how far apart two colours are in brightness. Identical colours score 1:1, and black on white scores 21:1.
The checker works it out from the relative luminance of each colour, which is a measure of how light the colour appears. A higher ratio means the text stands out more from its background, so more people can read it comfortably. That includes people with low vision, and anyone reading a phone in bright sunlight.
WCAG 2.2 contrast requirements
WCAG 2.2 sets a minimum ratio for each kind of content, and the table below lists all five. Large text is at least 18 point (24px) in a regular weight, or 14 point (about 18.66px) in bold.
| Level | Content | Minimum ratio | Success criterion |
|---|---|---|---|
| AA | Normal text | 4.5:1 | 1.4.3 Contrast (Minimum) |
| AA | Large text | 3:1 | 1.4.3 Contrast (Minimum) |
| AAA | Normal text | 7:1 | 1.4.6 Contrast (Enhanced) |
| AAA | Large text | 4.5:1 | 1.4.6 Contrast (Enhanced) |
| AA | UI components and graphical objects | 3:1 | 1.4.11 Non-text Contrast |
Three things are exempt: logos and brand names, text that is purely decorative or incidental, and text in inactive (disabled) interface components.
How to fix a failing colour pair
Darken the text or lighten the background until the ratio reaches the threshold. You can also do the reverse on a dark design. The checker suggests nearby shades that pass, so you can apply one and keep the look close to your original. Small changes often work: a slightly darker grey is usually enough to turn a fail into a pass.
Test the less obvious spots too. Placeholder text in form fields is often pale grey, and text placed over an image needs enough contrast against the part of the image behind it. A pass on one pair says nothing about the rest of the page, so check each combination you use.
Colour should never carry meaning alone. If an error shows only as red text, add an icon or a written message, so people who cannot tell the colours apart still get the point.
When to get help
A single failing pair is quick to fix. If many colours across your site fail, or you are planning a new design, it is easier to set accessible colours at the start than to correct them page by page. If you would like a second pair of eyes on a design, we can help.