Contrast Checker
Check whether a text and background color pair meets WCAG 2 contrast requirements.
HEX, rgb() or hsl()
HEX, rgb() or hsl()
Transparent colors are blended: the text over the background, the background over white.
Large text sample
Normal text reads like this. The quick brown fox jumps over the lazy dog.
CONTRAST RATIO
- AA Normal text 4.5:1
- AA Large text 3:1
- AAA Normal text 7:1
- AAA Large text 4.5:1
HOW IT WORKS
Using the contrast checker
- Enter a text color and a background color. The ratio and results update as you type.
- Large text means at least 24px regular or 18.66px bold (18pt / 14pt bold).
- This checks one color pair only. Accessible design also depends on font size, weight, focus states and the rest of the page.
KEEP GOING
All tools ↗