Loading tool…
How to Check Colour Contrast (WCAG)
The Contrast Checker evaluates foreground and background colour combinations against WCAG 2.1 accessibility guidelines — telling you if text is readable.
- Enter or pick a foreground (text) colour and a background colour.
- View the contrast ratio and WCAG pass/fail status for AA and AAA levels.
- Adjust colours until you achieve the required contrast ratio.
WCAG Contrast Requirements
WCAG 2.1 defines minimum contrast ratios: 4.5:1 for normal text (AA level), 3:1 for large text (AA), and 7:1 for normal text (AAA). The contrast ratio is calculated from the relative luminance of the two colours: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. Meeting these standards ensures text is readable for users with low vision or colour deficiencies.
Why Use Our Contrast Checker?
- WCAG 2.1 compliant — checks AA and AAA levels for normal and large text.
- Live preview — see text rendered on the background in real time.
- Colour suggestions — get suggested adjustments to meet the required ratio.
- No account needed — check contrast instantly.
Frequently Asked Questions
What contrast ratio do I need?
For WCAG AA compliance: 4.5:1 for normal text (<18px), 3:1 for large text (≥18px bold or ≥24px). For AAA: 7:1 for normal text, 4.5:1 for large text.
What counts as 'large text'?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.67px) or larger for bold weight.
Is colour contrast a legal requirement?
In many jurisdictions, yes. The ADA (US), EAA (EU), and AODA (Canada) reference WCAG guidelines. Government and public-sector websites typically require at least WCAG AA compliance.
Is my data stored?
No. Everything runs in your browser.