Contrast checker
Check whether a text color is readable on a background color, by the WCAG 2.2 contrast rules.
Large text sample
Normal text sample: the quick brown fox jumps over the lazy dog.
Contrast ratio
How it works
Each color’s relative luminance L is computed from its linearised red, green and blue values:
L = 0.2126 R + 0.7152 G + 0.0722 Bratio = (L_light + 0.05) ÷ (L_dark + 0.05)Worked example
- #000000 has L = 0, #FFFFFF has L = 1
- (1 + 0.05) ÷ (0 + 0.05)
- 21:1, the highest possible
Frequently asked questions
What contrast ratio do I need?
WCAG 2.2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text (24 px, or 18.7 px bold) and for icons and form borders. Level AAA asks for 7:1 and 4.5:1.
Does the order of the colors matter?
No, the ratio is the same either way. It runs from 1:1 (no contrast) to 21:1 (black on white).
What about transparent colors?
Enter the color as it appears on the page, after any transparency has been blended with the background.