Colour Contrast Checker
Find out whether text is readable on its background. Get the contrast ratio and a pass or fail for each WCAG level.
Large heading text
Normal body text looks like this. Can you read it comfortably?
| Normal text, AA (4.5:1) | |
|---|---|
| Large text, AA (3:1) | |
| Normal text, AAA (7:1) | |
| Icons and form borders (3:1) |
Runs in your browser. What you enter here is not sent to our server.
- WCAG AA and AAA results
- Live text preview
- Suggests a passing colour
How to use the Colour Contrast Checker
- Pick or type the text colour and the background colour.
- Read the ratio and the pass or fail results.
- If it fails, select Suggest a text colour that passes AA.
What the levels mean
The Web Content Accessibility Guidelines ask for a ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) at level AA, the level most laws and policies refer to. Level AAA raises these to 7:1 and 4.5:1. Icons, input borders and other essential graphics need 3:1. Black on white is 21:1, the maximum.
Questions about the Colour Contrast Checker
Is passing the ratio enough to be accessible?
It is one requirement among several. Font size, weight and spacing also affect readability, and colour should never be the only way information is conveyed.
Does the ratio depend on which colour is the text?
No. Swapping text and background gives the same ratio.