About 8% of men and 0.5% of women have some form of color vision deficiency. Many more have situational low-vision conditions — bright sunlight on a phone screen, an aging monitor, low-contrast reading conditions. When your text and background colors don't have sufficient contrast, these users simply can't read your content. And increasingly, this isn't just a UX issue — it's a legal one.
The DevToolShack Color Contrast Checker calculates the contrast ratio between any two colors instantly and tells you whether they pass WCAG AA and AAA standards. Free, no sign-up.
What Is Contrast Ratio?
Contrast ratio is a number between 1:1 and 21:1 that describes the relative luminance difference between two colors:
- 1:1 — identical colors, no contrast at all
- 21:1 — maximum contrast (pure black on pure white)
The ratio is calculated from the relative luminance of each color — not simply how light or dark they look. This is why some color combinations that seem like they should have enough contrast actually fail: perceived brightness doesn't map linearly to luminance.
The WCAG Standards
The Web Content Accessibility Guidelines (WCAG) define two compliance levels for contrast:
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | N/A |
"Large text" means 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. Everything smaller is "normal text" and requires the higher 4.5:1 ratio.
"UI components" covers interactive elements like buttons, form inputs, focus indicators, and icons that convey meaning.
Common Failure Patterns
| Pattern | Typical Ratio | Problem |
|---|---|---|
| Light grey text on white | 2–3:1 | Fails AA for all text sizes |
| Brand color on white (many) | 3–4:1 | Passes large text only |
| White text on mid-tone background | 3–4:1 | Often fails normal text |
| Placeholder text | Often 2–3:1 | Almost always fails |
| Disabled button text | Often 1.5–2:1 | Intentionally low — exempt if truly disabled |
Fixing Contrast Failures
When a color pair fails, you have a few options:
Darken the foreground color
If your text color is too light, reduce lightness in HSL. Going from hsl(220, 60%, 60%) to hsl(220, 60%, 40%) significantly increases contrast without changing the hue or saturation character of the color.
Lighten the background
If your background is too dark for light text, increasing lightness brings the ratio up. Or switch to a darker background to push the ratio the other way.
Add a text shadow or outline
For text overlaid on images or complex backgrounds, a subtle text shadow can effectively increase perceived contrast without changing the text color:
text-shadow: 0 1px 3px rgba(0,0,0,0.6);Increase font size or weight
If you can't change the colors (brand constraints, third-party component), increasing to 24px or making the text bold may move it into the "large text" category with its lower 3:1 threshold.
Don't Rely on Color Alone
Contrast ratio only covers luminance difference. Color vision deficiency means some people can't distinguish certain hues at all, regardless of contrast ratio. Red and green with similar luminance will have an acceptable contrast ratio — but be completely indistinguishable to someone with deuteranopia.
The fix: never use color as the only way to convey information. Add an icon, a label, a pattern, or a shape change alongside any color-coded meaning:
<!-- ❌ Color only — invisible to colorblind users -->
<span style="color: red">Error</span>
<!-- ✅ Color + icon + label -->
<span style="color: red">
<i class="fa-solid fa-circle-xmark"></i> Error: invalid email address
</span>Testing Beyond the Contrast Checker
The Contrast Checker gives you the ratio — but there are a few more steps to full accessibility testing:
- Browser DevTools — Chrome's Accessibility panel flags contrast issues in the element inspector
- axe DevTools — browser extension that audits a full page for WCAG violations
- Color blindness simulators — browser extensions like "Colorblinding" show your UI as various types of color vision deficiency users see it
- Keyboard navigation test — tab through your UI and verify focus indicators are visible (they need a 3:1 contrast ratio too)