Overview
What this tool checks
Enter a text color and a background color and instantly see the contrast ratio between them, plus whether the combination passes the WCAG accessibility standards (AA and AAA) for normal and large text. A live preview shows how the pairing actually looks. Everything runs in your browser.
The basics
What is contrast ratio?
Contrast ratio measures the difference in perceived brightness between two colors. It ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast). The higher the ratio, the easier text is to read.
It's calculated from each color's relative luminance using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's.
What you need to pass
The WCAG thresholds
| Normal text | Large text | |
|---|---|---|
| AA (standard target) | 4.5:1 | 3:1 |
| AAA (strictest) | 7:1 | 4.5:1 |
Most websites aim for AA, which is also the level referenced by accessibility laws like the ADA (US) and EN 301 549 (EU). AAA is the gold standard, recommended where readability is critical.
What counts as large text
Accessibility + usability
Why contrast matters
Good contrast isn't just for compliance — it helps everyone:
- People with low vision or color blindness rely on it to read at all
- Aging eyes lose contrast sensitivity, affecting a huge share of users
- Anyone using a phone in bright sunlight struggles with low-contrast text
- Tired eyes and small screens make poor contrast harder for all users
Light gray text on a white background is the most common accessibility failure on the web. It looks elegant to designers on a high-quality monitor but is unreadable for many real users.
Practical advice
Tips for fixing low contrast
- Darken the text or lighten the background until you hit at least 4.5:1
- Don't rely on color alone to convey meaning — add icons or labels for color-blind users
- Test your actual brand colors, not just black and white
- For buttons and links, check the text against the button's background, not the page
- Placeholder text and disabled states still need reasonable contrast
Behind the scenes
Privacy and how it runs
Runs in your browser
Common questions
What is a good contrast ratio?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. For the stricter AAA level, aim for 7:1 and 4.5:1 respectively. When in doubt, more contrast is more readable.
Does pure black on white pass?
Yes — it's the maximum at 21:1 and passes every level. But it can feel harsh; many designs use very dark gray (like #1a1a1a) on white, which still easily passes AA and AAA while being slightly softer.
Is gray text on white accessible?
It depends on the gray. Medium gray (#767676) on white is exactly 4.5:1 — the minimum for AA normal text. Lighter grays fail. Always check the specific value rather than assuming.
Do I need to meet AAA?
For most sites, AA is the practical and legal target. AAA is recommended for content where readability is essential (government, healthcare, education) but is hard to achieve for all design elements. Meeting AA reliably is the priority.
Does contrast apply to images of text?
Yes, text inside images should meet the same contrast ratios. Better still, use real text instead of images of text so it's also selectable, translatable, and scalable.