Colour Contrast Checker
Check the contrast ratio between text and background colours against WCAG AA and AAA requirements.
What is the Colour Contrast Checker?
The colour contrast checker calculates the WCAG contrast ratio between a text colour and a background colour, then shows pass or fail for AA and AAA at normal and large text sizes. It is useful for making sure text is readable, including for people with low vision.
How to use it
- Enter the text colour as a hex code.
- Enter the background colour as a hex code.
- Read the ratio and the pass or fail lines.
- Adjust a colour and check again until it passes.
Colour Contrast Checker — FAQ
What contrast ratio do I need?
WCAG AA asks for 4.5 to 1 for normal text and 3 to 1 for large text. AAA asks for 7 to 1 and 4.5 to 1. Check the current WCAG guidance for details.
What counts as large text?
WCAG treats roughly 18 point regular or 14 point bold text and above as large. Check the guidelines for the exact definition.
Is a passing ratio enough for accessibility?
No. Contrast is one part of accessible design. Also consider font size, spacing, colour-only cues and testing with real users.