Make sure your website text is readable for everyone – get the contrast ratio and pass/fail results instantly.
What is the Color Contrast Checker?
Low-contrast text is hard to read on phones in sunlight and for people with low vision. The Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (AA level). Pick a text and background colour to see the exact ratio, pass/fail results for AA and AAA, a live preview, and a suggested colour that passes.
Accessible colours also help SEO tools like Lighthouse give your site a better score.
How to use the Color Contrast Checker
- Pick or type the text and background colours.
- Read the contrast ratio and WCAG results.
- Use the suggested colour if it fails.
WCAG requirements
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 |
| Icons & UI borders | 3:1 | – |
Frequently asked questions
What is the best contrast ratio?
At least 4.5:1 for body text; 7:1 is ideal for long reading.
Is black on white too harsh?
21:1 is the maximum; very dark grey on white is also excellent and softer.
Does it check images?
No, only solid colours.
Is it free?
Yes.
This color contrast checker is 100% free, needs no signup and works on phones, tablets and computers.
Last updated: · By NodifyTech