Colour contrast and web accessibility (WCAG), explained
Good colour contrast is what makes text easy to read — for everyone, including people with low vision or colour blindness. Web accessibility guidelines put numbers on it, and meeting them is simpler than it sounds. Here is what to know.
What contrast ratio means
Contrast ratio compares the brightness of text against its background, from 1:1 (identical) to 21:1 (black on white). The higher the ratio, the easier the text is to read. It is calculated from the relative luminance of the two colours, not just how different they look, so a quick checker is the reliable way to know.
WCAG AA and AAA levels
The WCAG guidelines define two levels. AA — the common legal and practical target — needs a ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). AAA is stricter at 7:1 and 4.5:1. Aim for AA on body text; AAA is a bonus where readability is critical.
How to fix failing contrast
If a pair fails, darken the text or lighten the background until it passes — small changes often do it. Do not rely on colour alone to convey meaning (add labels or icons), and remember that large, bold text needs less contrast than small text. A contrast checker shows the exact ratio and whether it passes AA and AAA as you adjust.
Try it: check colour contrast and build accessible palettes with ColorBloom →