Color Contrast Checker
Check WCAG AA/AAA accessibility contrast between two colors
The quick brown fox jumps over the lazy dog
17.40:1
Normal Text
AA (4.5:1)
AAA (7:1)
Large Text
AA (3:1)
AAA (4.5:1)
What is this tool?
Checks the contrast ratio between a text color and background color against WCAG accessibility standards, telling you whether the combination is readable enough to meet AA or AAA compliance levels.
How to use it
Enter or pick your text and background colors, and the contrast ratio and pass/fail status for each accessibility level is calculated instantly, with a live text preview.
Large text has a lower contrast requirement than normal body text under WCAG guidelines — if a color combination fails for body text but you only need it for a large heading, it may still be compliant.
More from Design & Color:
Advertisement