Colour Contrast
Checker (WCAG)
Check whether your text and background colours are easy enough to read.
Enter a text colour and a background colour in hex, or pick them visually. The tool shows the contrast ratio and whether it passes WCAG AA and AAA for normal text, large text and interface components, with a live sample.
Your colours
Result
Based on the WCAG 2.x contrast formula. Large text means 24 px or more, or 19 px or more in bold. A pass here does not make a whole page accessible, but it is a good first check.
Why contrast matters
Low contrast text is hard to read for many people, especially on phones in sunlight. Checking contrast helps your website, ads and documents work for more people and avoids a common accessibility failure.
- WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text.
- AAA asks for at least 7:1 for normal text and 4.5:1 for large text.
- Interface parts such as buttons and icons need at least 3:1 against their surroundings.
Contrast is one part of accessibility. Our website design and branding work considers readability from the start.
Frequently Asked
What is a good contrast ratio?
For normal text, aim for at least 4.5:1 (WCAG AA). For large text and interface components, 3:1 is the minimum.
What counts as large text?
Text of 24 px or more, or 19 px or more in bold, under WCAG 2.x guidance.
Does passing mean my site is accessible?
No. Contrast is only one requirement. Accessibility also covers structure, keyboard use, labels and more.
Can I use shorthand hex like #fff?
Yes. Three-digit and six-digit hex codes both work.
Need Help Putting This
Into Practice?
Tell us what you need. We reply with an honest recommendation and a clear plan.
