Colour contrast is the difference in lightness between text, or an interface element such as a button, and the background behind it. Enough contrast lets people read and use a page easily, including people with low vision, colour blindness, or a phone screen in bright sunlight.
How colour contrast works
Contrast is measured as a ratio, calculated from the relative brightness of the two colours. It runs from 1:1, where the colours are identical, to 21:1 for black on white. The Web Content Accessibility Guidelines (WCAG), at version 2.2 at the time of writing (October 2026), set the benchmarks most organisations use:
| What it applies to | Level AA | Level AAA |
|---|---|---|
| Normal body text | 4.5:1 | 7:1 |
| Large text (about 24px, or about 19px bold) | 3:1 | 4.5:1 |
| Button edges, form field borders, icons that carry meaning | 3:1 | Not set separately |
Level AA is the usual target. Logos, purely decorative images and disabled controls are exempt. Placeholder text inside form fields is not exempt, and it is one of the most common failures.
Lightness is what counts, not hue. A mid-orange that looks bold as a large heading can fail when used for small white text on a button, because the white and the orange are closer in lightness than they appear. Darkening the orange slightly usually fixes it without changing the brand.
Why it matters
Low contrast shuts some visitors out and slows everyone else down. Pale grey body text, light text on photographs and thin outline buttons all make a page harder to read on a phone outdoors, on a cheap laptop screen, or for an older customer whose eyesight has changed.
There is a legal side in the UK. Under the Equality Act 2010, businesses that provide services to the public have a duty to make reasonable adjustments for disabled people, and that duty is widely understood to cover websites. Public sector bodies have specific website accessibility regulations that point to WCAG AA. For a private business, meeting the AA contrast ratios is a practical, measurable way to show you have taken the duty seriously.
It affects results too. A call to action that blends into its background gets pressed less, whatever the copy says.
Common mistakes
- Light grey body text chosen because it looks elegant in a design mock-up.
- Text over photographs with no overlay, so some words sit on dark areas and others on light ones.
- Brand colours used everywhere. A colour that passes for large headings may fail for small links or button labels.
- Pale placeholder text used instead of a proper label on form fields.
- Checking only the main state. Hover, focus and error states need enough contrast too, and so does the keyboard focus outline.
- Relying on colour alone, such as marking errors only in red, which some colour-blind visitors cannot tell apart.
How to act on it
Run your main templates through an automated checker such as Lighthouse in Chrome or the axe browser extension, which flag contrast failures with the exact ratio. For individual colour pairs, a contrast checker tool gives the ratio instantly. Then fix the colour palette, not individual pages: define a darker shade of each brand colour for small text and buttons, and keep the brighter shade for large headings and decoration.
Check text over images by hand, as automated tools often miss it. Record what you have checked and what is still outstanding in an accessibility statement.
Contrast is one of the first things I fix in a website redesign, because it is cheap to correct in the design system and expensive to patch page by page later.