Free online tools
WCAG colour contrast checker
Enter a text colour and a background colour. The tool calculates the contrast ratio and shows whether you meet WCAG at levels AA and AAA.
Contrast ratio
15.79:1
| AA | AAA | |
|---|---|---|
| Normal text | Pass | Pass |
| Large text | Pass | Pass |
| UI components | Pass | — |
Preview
Sample text on the chosen background
Sample text on the chosen background
Your data never leaves your browser. Nothing is sent to a server.
How to use it
- Pick the text and background colours with the picker or type hex codes.
- Read the contrast ratio.
- Check the results for normal text, large text and UI components.
- If a test fails, darken or lighten one colour and check again.
WCAG contrast thresholds
Level AA requires a contrast of at least 4.5:1 for normal text and 3:1 for large text and UI components such as input borders and icons. Level AAA raises this to 7:1 for normal text and 4.5:1 for large text.
What counts as large text
WCAG treats text as large from 24 pixels, which is 18 points, or from about 18.7 pixels when bold. Smaller text has to meet the higher threshold.
Why it matters
Low contrast makes reading harder for people with low vision, but also for anyone on a phone in bright sun. Accessibility is also a legal requirement for many services in the European Union. Contrast is the cheapest fix with the biggest effect.
Frequently asked questions
Need more than a tool?
If there is a bigger project behind it, a website, a shop or an app, describe it in a short brief. We reply with specifics and no obligation.
Describe your project