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.
The Math Behind the Ratio
A contrast ratio isn't a simple visual estimate — it's calculated from relative luminance, a weighted formula based on how the human eye perceives red, green, and blue light differently (green contributes far more to perceived brightness than blue, for instance). The formula takes the lighter color's luminance plus 0.05, divided by the darker color's luminance plus 0.05, which is why two colors that look similarly "bright" to a quick glance can still fail a contrast check if their actual luminance values differ more than they appear to.
A Commonly Missed Requirement: Non-Text Contrast
Most people focus entirely on text contrast and forget that WCAG 2.1 also requires a minimum 3:1 contrast ratio for meaningful graphical elements and UI components — icons, button borders, form field outlines, and focus indicators all need to meet this separately from any text contrast requirement. A site can pass every text-contrast check and still fail an accessibility audit because its icon-only buttons or input field borders are too faint to distinguish from the background.
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.
