Contrast Checker
Check the WCAG contrast ratio between a text colour and a background colour.
Last updated
How to check colour contrast
- Choose the text colour and the background colour, or type their HEX codes.
- Read the contrast ratio and whether it passes WCAG AA and AAA for normal and large text.
- Click Swap colours to check the reverse.
The formula
WCAG's contrast ratio compares relative luminance: (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the lighter and darker colour's luminance and each channel is gamma-corrected before being weighted (0.2126×R + 0.7152×G + 0.0722×B) — this is why the ratio isn't simply "how different the colours look." "Large text" means 18pt+ (24px) regular weight or 14pt+ (~18.7px) bold; everything else counts as normal text and needs the stricter ratio.
Nothing entered here is sent to a server — the entire calculation runs as JavaScript in your browser tab.
Questions about colour contrast
What contrast ratio does WCAG require?
For level AA, at least 4.5:1 for normal text and 3:1 for large text. For AAA, 7:1 and 4.5:1.
What counts as large text?
18 point (24 px) or larger at normal weight, or 14 point (about 18.7 px) or larger in bold.
What is the highest possible contrast?
21:1, black on white. Grey #767676 on white is 4.5:1, about the lightest grey that passes AA for normal text.
Why does contrast matter?
Low contrast is hard to read for people with low vision or colour blindness, and for everyone on a phone in bright light.