Approximately 300 million people worldwide have some form of colour vision deficiency. Many more have age-related vision reduction, low-contrast displays, or are viewing websites outdoors in bright sunlight. Colour contrast accessibility — and the WCAG guidelines that govern it — exists to ensure your content is readable by all of them.
This article explains what contrast ratio is, what the WCAG standards require, how to test your colours, and what to do when you fail.
What Is Contrast Ratio?
Contrast ratio is a number that describes how much difference in luminance (perceived brightness) exists between two colours. It's expressed as a ratio like 4.5:1 or 7:1.
- 1:1 — No contrast at all (same colour on same colour)
- 21:1 — Maximum contrast (pure black on pure white)
The ratio is calculated from the relative luminance of each colour, a value derived from the RGB components that accounts for how the human eye perceives different wavelengths of light. You don't need to calculate this manually — tools like our Contrast Checker do it instantly.
Dark text on white background. Contrast ratio: ~18:1. Easy to read in all conditions.
Light red text on light background. Contrast ratio: ~2:1. Difficult to read for most users.
The WCAG Standards: AA vs AAA
The Web Content Accessibility Guidelines (WCAG) are published by the W3C and define the internationally accepted accessibility standards for the web. WCAG 2.1 defines two levels of contrast compliance:
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | 4.5:1 |
Normal text means body copy under 18pt (24px) or bold text under 14pt (18.67px bold). Large text is anything above those thresholds. UI components covers graphical elements like form inputs, icons, and focus indicators.
Legal note: In many countries, public sector websites are legally required to meet WCAG 2.1 AA. The EU Web Accessibility Directive and the US Section 508 both mandate this. Private sector websites are increasingly facing enforcement too, particularly in the US under ADA Title III.
How to Test Contrast
There are several ways to check colour contrast:
- Our Contrast Checker — Enter any two hex codes and see the ratio instantly, with AA and AAA pass/fail indicators
- Browser DevTools — Chrome's accessibility inspector shows contrast ratios in the Styles panel when you select a text element
- Figma's contrast plugin — Various plugins (e.g., Able, Contrast) check contrast inside your designs
- WAVE browser extension — Audits entire pages and flags contrast failures in context
Free WCAG AA and AAA contrast ratio checker — no sign-up needed.
What to Do When You Fail
If your text fails contrast, you have a few options:
- Darken the text colour — Moving towards black always increases contrast against a light background.
- Lighten the background — Moving the background closer to white increases contrast with dark text.
- Reduce the saturation of the text colour — Pure saturated colours (especially red and green) often have low luminance; darkening the shade significantly helps.
- Increase text size — Large text only needs a 3:1 ratio. If your colour won't pass at normal size, consider whether you can increase the font size or weight.
Common Failing Combinations
These are the most frequently seen contrast failures in real-world websites:
- Light grey text on white (#999 on #FFF is only 2.85:1 — fails AA)
- Yellow text on white — yellow has very high luminance, making its contrast with white extremely low
- Green text on black backgrounds — medium greens often have surprisingly low contrast with dark backgrounds
- White text on medium-saturation colours — a mid-range blue or red may look "obviously different" from white but still fail the 4.5:1 threshold
- Low-opacity text overlaid on images — the underlying image colours affect the effective contrast
Beyond the Ratio: Real-World Accessibility
Contrast ratio is a necessary but not sufficient condition for accessible design. Other factors that affect readability:
- Font size and weight — Thin fonts at small sizes are harder to read even at high contrast
- Line spacing — WCAG recommends 1.5× line height for body text
- Colour-only information — Never rely on colour alone to convey meaning (e.g., a red error state should also have a text label or icon)
- Focus indicators — Keyboard navigation requires visible focus outlines with sufficient contrast
Passing WCAG AA is the floor, not the ceiling. Aim to design for the widest possible range of users rather than just meeting the minimum threshold.