Color Contrast Checker (WCAG)
Check whether your text is readable against its background. See the contrast ratio, pass or fail for WCAG AA and AAA, a live preview, and a suggested colour that passes.
How to check contrast
- Pick your text colour and background colour.
- Read the ratio and the pass or fail results.
- If it fails, copy the suggested colour, which stays close to your original.
WCAG contrast requirements
| Level | Normal text | Large text |
|---|---|---|
| AA (recommended minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
| UI elements and icons | 3:1 | |
Why contrast matters
Low-contrast text is hard to read for people with low vision, older visitors and anyone using a phone outside in sunlight. Light grey text and pale buttons are the most common problem on modern websites. Better contrast helps everyone read faster and can improve conversions.
Related tools
Build a palette with the color palette generator, design accessible buttons with the CSS button generator, and convert codes with the color converter.
More free tools and guides
Practise tools like this on real projects in our digital marketing course in Faridabad, with weekday, weekend and online batches.
See the courseAll free toolsAsk on WhatsApp
Frequently Asked Questions
Is this contrast checker free?
Yes. It is free with no sign-up and works in your browser.
What is a good contrast ratio?
At least 4.5:1 for normal text and 3:1 for large text, to meet WCAG AA.
What counts as large text?
About 24 px regular or 19 px bold and above.
Does contrast affect SEO?
Not directly, but readable pages keep visitors engaged, and accessibility is part of a good user experience.