Tools / Colour converter
Colour converter and WCAG contrast checker
Enter a text colour and a background colour in any of the three notations. Both are converted, and the contrast ratio is computed with the WCAG 2 relative luminance formula.
Contrast ratio
-
The thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text means at least 18pt (24px), or 14pt (about 18.7px) in bold. Icons, input borders and focus indicators need 3:1 against what is next to them (WCAG 1.4.11). The ratio is rounded down to two decimals before comparing, so 4.499 fails AA.
Pitfalls
For a semi-transparent colour, the tool composites the text colour over the background, and the background over white. On a real page the background of the background may differ, so check the colour the user actually sees.
The WCAG 2 formula is a simple luminance ratio and does not model perception closely; it is known to be least reliable for dark colour pairs. Passing it is a minimum, not proof of comfortable reading. Thin or small fonts need more contrast than the number suggests.
hsl() lightness is not perceived lightness. Yellow at 50% lightness is far brighter than blue at 50%, which is why the luminance row is shown.