Colour contrast
Colour contrast is the difference in brightness between text or interface elements and the background behind them, measured as a ratio that WCAG uses to set minimum levels for readable content.
Contrast is about lightness, not hue. Red text on a green background can look vivid and still be hard to read, because the two colours have similar brightness. The WCAG formula compares the relative luminance of two colours and returns a ratio from 1:1, two identical colours, to 21:1, black on white.
Contrast is not only a concern for people with low vision. Anyone reading a phone in sunlight, on a cheap screen or with tired eyes benefits from it, which is why low contrast is one of the most common and most visible accessibility failures.
How it works
At WCAG level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1. Large text means at least 18 point, about 24 CSS pixels, or 14 point bold, about 18.5 CSS pixels. The stricter AAA level asks for 7:1 and 4.5:1. Since WCAG 2.1, the visible parts of buttons, form fields, focus indicators and meaningful icons also need at least 3:1 against adjacent colours.
Logos, inactive controls and purely decorative text are exempt. Contrast checkers built into browsers and design tools give the ratio as soon as you enter two colour values.
The ratio comes from relative luminance, a measure of how bright a colour appears to the human eye, which weights green most heavily and blue least. The lighter colour's luminance plus a small constant is divided by the darker colour's luminance plus the same constant. That is why two colours that look clearly different, such as a medium blue and a medium red, can still score a low ratio. Nobody needs to do the sum by hand; any checker does it instantly.
Example
A beauty salon's site uses mid-grey #999999 text on white for an elegant look. That pairing scores about 2.8:1, well below the 4.5:1 needed for normal text. Darkening the grey to #767676 brings it just over 4.5:1 and passes AA, and #595959 reaches about 7:1 for AAA. The page looks almost identical, but it is now readable on a phone outdoors.
The salon also uses white text on a pale pink button for its booking link, which fails clearly. Rather than abandon the pink, the designer keeps it as a background colour for sections and uses a deep plum for the button, with white text that passes comfortably. Placeholder text in the booking form, even paler than the body text, is darkened too, and the focus outline is checked against both the white page and the pink sections.
Why it matters for your business
Low contrast quietly costs you readers: if visitors have to strain, they skim or leave, and older customers are often the first to go. It also carries legal risk where accessibility rules apply, such as public-sector sites and many consumer services in the EU, and contrast failures are easy for anyone to find with a free tool. Fixing them is usually cheap, often a matter of darkening a few values in the colour palette.
Common mistakes
- Placing text directly on photos, where contrast changes across the image and fails in places.
- Checking body text but forgetting placeholder text, links, buttons and focus outlines.
- Assuming brand colours are fine because they look clear on the designer's high-quality screen.
- Using colour difference alone, such as red versus green status dots, without text or icons.
Questions people ask
What contrast ratio do I need for WCAG AA?
For WCAG level AA, normal text needs at least 4.5:1 against its background and large text needs at least 3:1. Large text is at least 24 CSS pixels, or about 18.5 pixels if bold. Interface parts such as button borders, form field outlines and meaningful icons need at least 3:1 against neighbouring colours.
How do I check colour contrast?
Enter the text and background colour values into a contrast checker, such as the one built into browser developer tools, a design tool plugin or a free online checker. It returns the ratio and whether it passes AA and AAA. For text over images, test the lightest and darkest areas behind the text.
Does dark mode need the same contrast?
Yes. The WCAG ratios apply whatever the colours, so light text on a dark background must still reach 4.5:1 for normal text. Very bright white on pure black can feel harsh to some readers, so many dark themes use off-white text on dark grey, which still passes comfortably when checked.
