🎨 Colour & contrast
Contrast that everyone can read
Low-contrast text is one of the most common accessibility failures on the web — and one of the easiest to fix. It matters for people with low vision or colour-blindness, and for everyone in bright sunlight or on a cheap screen. Here's what the numbers mean, an interactive checker, and the mistakes to avoid.
01 What "contrast ratio" means
Contrast is measured as a ratio between the relative luminance (perceived brightness) of two colours — your text and its background. It runs from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The bigger the number, the easier it is to read. WCAG sets minimum ratios depending on the text size and the level you're aiming for.
02 The ratios to hit
"Large text" means roughly 24px (18pt) or 18.66px (14pt) bold and up.
4.5 : 1
Normal body text at level AA — the baseline most sites and laws target (WCAG 1.4.3).
3 : 1
Large text (headings, big labels) at AA. Bigger letters need less contrast to stay legible.
7 : 1
Normal text at the stricter AAA level (4.5:1 for large text) — WCAG 1.4.6.
3 : 1
Non-text: icons, input borders, focus rings, chart colours and other meaningful graphics (WCAG 1.4.11).
Try it
Contrast checker
Pick a text colour and a background colour to see the live ratio and which WCAG levels it passes.
See the difference
The same message, below and above the 4.5:1 line.
WCAG 1.4.3 Contrast (Minimum)✕ Inaccessible
Subscribe to our newsletter for weekly tips and updates.
Contrast ≈ 1.9:1 — failsLight-grey text on a grey card is decorative at best and unreadable for many.
✓ Accessible
Subscribe to our newsletter for weekly tips and updates.
Contrast ≈ 13:1 — passes AAADark text on a light surface clears AA (4.5:1) comfortably and stays legible everywhere.
Never rely on colour alone
Contrast isn't the whole story. If colour is the only way to tell things apart, colour-blind users are lost.
WCAG 1.4.1 Use of Colour✕ Inaccessible
Fields marked only by a red or green outline, with no text.
To a colour-blind user:
"Which field is the error? They look the same."
Roughly 1 in 12 men can't reliably distinguish red from green.
✓ Accessible
An error shown with colour plus an icon and the words "Enter a valid email."
Pair colour with text, an icon, or a pattern so the meaning survives without it.
Watch out for
Common contrast mistakes
These slip past almost everyone. Check them specifically.
- Placeholder text used as a label — it's usually far too faint.
- Light-grey body text ("#999 on white" is only ~2.8:1).
- Text over photos or gradients, where contrast changes across the image — add a scrim or text shadow.
- Coloured buttons where white text sits on a pale accent.
- Disabled controls so faint no one can read what's unavailable.
- Link colour that only differs from body text by hue, with no underline.
- Icons, borders and focus rings — remember these need 3:1 too.
▶ Check your colours
Use the checker above for quick pairs, and these for real pages:
🎨 WebAIM Contrast Checker (opens in a new tab)
The classic. Enter two colours and get AA/AAA pass or fail for normal and large text.
🛠️ Browser DevTools
Chrome and Firefox show a contrast ratio (and a "fix" suggestion) right in the colour picker when you inspect any text element.
🔎 Colour Contrast Analyser (opens in a new tab)
A free desktop app with an eyedropper — perfect for sampling colours from images, PDFs and apps.
🧪 axe DevTools (opens in a new tab)
Scans a whole page and flags every contrast failure at once — a fast first pass.
Want your brand palette checked, or your whole product audited for contrast and more?
Get in touch