How to use it
- Enter the text colour and the background colour, as HEX codes or with the pickers.
- Read the ratio and the pass or fail table. The preview shows both sizes of text.
- Use Swap colors to check the reverse, such as light text on a dark background.
The formula
WCAG 2 defines relative luminance as L = 0.2126 R + 0.7152 G + 0.0722 B, where each channel is first converted from sRGB to linear light. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), with L1 the lighter colour. Black on white is 21:1 and identical colours are 1:1.
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Interface parts and meaningful graphics need 3:1 for AA.
Example
Grey #777777 on white: luminance of the grey is about 0.184, so the ratio is 1.05 / 0.234 = 4.48. It passes for large text, but fails AA for normal text.
Tips
- Contrast is not the only accessibility need: do not rely on colour alone to convey meaning.
- Text over images or gradients needs checking at its worst spot.
- WCAG 2 contrast is a simple measure and has known weaknesses with dark mode and thin fonts; treat it as a minimum.