Contrast and Accessibility Checker
Check the WCAG contrast ratio between text and background colours and get passing alternatives.
Runs in your browser. Your input is processed on your device and is not uploaded to our server.
Normal text: the quick brown fox jumps over the lazy dog.
Large text sample
Large bold text sample
Contrast ratio
–
| Use | AA | AAA |
|---|
How to use the Contrast and Accessibility Checker
- Enter the text and background colours.
- Read the contrast ratio and AA/AAA results for normal and large text.
- Use the suggested colours if the combination fails.
The ratio follows WCAG 2.2: (L1 + 0.05) ÷ (L2 + 0.05) using relative luminance. Level AA needs 4.5:1 for normal text and 3:1 for large text and user-interface components; AAA needs 7:1 and 4.5:1. Semi-transparent text is blended with the background first. When a pair fails, the tool suggests the nearest lighter or darker text colour that passes.
Frequently asked questions
What counts as large text?
At least 24 CSS pixels, or 18.66 pixels if bold (18 pt / 14 pt).
Is contrast the only accessibility requirement for colour?
No. Information must not rely on colour alone; add text, icons or patterns too.