Color Contrast Checker Guide – WCAG AA & AAA Accessibility
The Color Contrast Checker ensures your text is readable for everyone — including people with low vision. It calculates contrast ratios and shows WCAG AA/AAA pass/fail instantly.
Check your colour contrast for WCAG compliance — instant, free, no signup.
Open Color Contrast Checker →WCAG Contrast Ratio Requirements
| Level | Normal Text | Large Text (18pt+ or 14pt bold) |
|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 |
| AAA (Enhanced) | 7:1 | 4.5:1 |
| Examples | Black on white = 21:1 ✅ | Dark grey on light grey varies |
How Contrast Ratio is Calculated
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker. Luminance is calculated from the linear RGB values of the colour. This is defined in the WCAG 2.1 specification.
Common Failing Combinations
- Light grey text (#999) on white (#fff) — ratio ~2.8:1 — FAILS AA
- Yellow (#ffff00) on white — ratio ~1.07:1 — FAILS AA
- Light blue (#add8e6) on white — ratio ~1.6:1 — FAILS AA
- Red (#ff0000) on white — ratio ~4:1 — FAILS AA for normal text
How to Fix Low Contrast
- Darken the foreground colour (reduce lightness in HSL) — most common fix.
- Lighten the background colour.
- Increase font size (makes large-text rule apply with lower ratio).
- Use the contrast checker's suggestions to find the nearest passing shade.
Frequently Asked Questions
AA: 4.5:1 for normal text, 3:1 for large text. AAA: 7:1 for normal, 4.5:1 for large. Black on white = 21:1. Light grey on white often fails even AA.
18pt (24px) or larger, or 14pt (18.67px) bold or larger. Large text has a lower contrast requirement because it's naturally easier to read.
Darken the foreground or lighten the background. Avoid grey-on-grey, yellow-on-white or light-blue-on-white. Aim for 4.5:1 or higher. The checker shows the exact ratio so you can iterate.