Web development and performance
What is Contrast ratio?
Contrast ratio measures the difference in relative luminance between two colours, expressed from 1:1 to 21:1. WCAG AA requires 4.5:1 for normal text, 3:1 for large text, and 3:1 for interface components and meaningful graphics.
Also called: colour contrast · color contrast
The thresholds that catch people out
| What | Minimum |
|---|---|
| Body text under 18.66px bold or 24px regular | 4.5:1 |
| Large text at or above that size | 3:1 |
| Icons, borders and interface components | 3:1 |
| Decorative graphics conveying no information | No requirement |
Why brand colours fail so often
Brand palettes are chosen on a monitor, at large sizes, by people with good eyesight. WhatsApp green at #25D366 with white text measures 1.98:1 — a fifth of what body text requires — and it is used that way on thousands of buttons.
How to handle it without abandoning the brand
- Darken the brand colour for text backgrounds and keep the original for large decorative use
- Measure rather than judge by eye; the difference between 4.1:1 and 4.6:1 is invisible and decisive
- Check hover and focus states too, which are frequently forgotten
- Never rely on colour alone to convey meaning
Where this is covered in depth
A definition can only go so far. The 35 types of SEO, explained without the padding covers this properly — 6 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.