Why Does Colour Contrast Matter?
Approximately 8% of men and 0.5% of women have some form of colour vision deficiency. Additionally, many people read websites in bright sunlight, on low-quality screens or with visual impairments. Sufficient colour contrast ensures your content is readable by the widest possible audience.
What Is a Contrast Ratio?
A contrast ratio is a mathematical measure of the difference in luminance between a foreground colour (usually text) and a background colour. It ranges from 1:1 (identical colours, no contrast) to 21:1 (black text on white background, maximum contrast).
WCAG AA vs AAA Requirements
The Web Content Accessibility Guidelines (WCAG) define two levels of contrast compliance:
| Level | Normal Text | Large Text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
WCAG AA is the standard required by most accessibility legislation including the ADA (USA), EN 301 549 (EU) and the Equality Act (UK). AAA is aspirational — not required by law but recommended for maximum accessibility.
What Is Large Text?
Text is considered large if it is 18pt (24px) or larger, or 14pt bold (approximately 18.67px bold) or larger. Large text requires a lower contrast ratio because it is inherently easier to read.
Test Your Colours Free
Our Color Contrast Checker calculates the exact contrast ratio for any colour pair and shows pass/fail results for all WCAG AA and AAA criteria instantly.
