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.
Good to 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.
From the blog
Guides that go deeper into what this tool does.
WCAG Contrast Ratios: AA and AAA Explained
Color contrast decides whether your text is readable. Here is what WCAG AA and AAA mean, what ratios you actually need, and how to check any color pair in seconds.
Color Contrast for Web Design: A Beginner's Guide
WCAG contrast ratios explained simply — the exact numbers you need, why it's now a legal requirement in the EU, and how to test and fix your own colors.
Spotify Green: The Exact Hex Code and How to Use It
Spotify green is #1DB954 — but the logo uses a different shade. The exact hex, RGB, and contrast data, plus how to use it without breaking accessibility.