Contrast Checker
Enter a text and background color to get the WCAG 2.x contrast ratio and compliance badges.
The quick brown fox jumps over the lazy dog.
Good contrast makes interfaces readable for everyone. This sample updates live as you change the text and background colors above.
How this tool works
The contrast ratio is calculated from the relative luminance of the text color and its background. WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1. Higher ratios are always easier to read.
Web Content Accessibility Guidelines — WikipediaContrast ratio measures how easy it is to tell two colors apart — most often text against its background. Meeting WCAG contrast levels keeps content readable for everyone.
Frequently asked questions
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. Higher is always better.
Must-know facts
- The ratio ranges from 1:1 (identical colors) up to 21:1 (black on white).
- A 4.5:1 ratio passes AA normal text, while 7:1 passes AAA normal text.
Related tools
These color tools pair naturally with the one you just used — keep exploring.