What Is WCAG and Why Does It Matter?
The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for making web content accessible to people with disabilities. Published by the W3C, they're the global standard for digital accessibility.
Color contrast is one of the most basic — and most commonly violated — accessibility requirements. An estimated 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Poor contrast doesn't just affect them: it affects everyone using your site in bright sunlight, on low-brightness screens, or at small font sizes.
WCAG Contrast Ratio Standards: AA vs AAA
WCAG 2.2 defines two compliance levels for text contrast:
| Level | Normal Text | Large Text | Required For |
|---|---|---|---|
| AA | 4.5:1 minimum | 3:1 minimum | Most legal requirements |
| AAA | 7:1 minimum | 4.5:1 minimum | Highest standard, recommended |
"Large text" is defined as at least 18pt (24px) bold or 24pt (32px) regular weight. Icons and UI components like form borders or checkboxes also need a 3:1 contrast ratio against their background under WCAG 2.2.
How Contrast Ratio Is Calculated
The contrast ratio is calculated using the relative luminance of two colors. Luminance is not the same as brightness — it's the perceived brightness of a color, weighted according to how the human eye responds to different wavelengths.
The formula uses the sRGB color space and weights green the most (since our eyes are most sensitive to green light), red medium, and blue the least:
Luminance = 0.2126 × R + 0.7152 × G + 0.0722 × B
Where R, G, and B are gamma-corrected values from 0 to 1 (not the raw 0-255 values). The contrast ratio is then:
(L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter color's luminance and L2 is the darker one's. The 0.05 accounts for flare in real-world viewing conditions.
What Counts as "Text" Under WCAG?
Not every text element needs to meet the contrast standard. Here are the exceptions:
- Logos: Text that is part of a logo or brand name has no contrast requirement.
- Incidental text: Text in inactive UI components, or text that is purely decorative and not interacted with.
- Placeholder text: Form field placeholders are exempt, but it's still good practice to make them readable.
- Disabled controls: Buttons or inputs in a disabled state.
That said, the exceptions are narrow. All body text, headings, navigation links, form labels, and button text must meet the minimum contrast.
5 Common Contrast Mistakes (and How to Fix Them)
1. Low-contrast placeholder text
Many designers use light gray placeholders that fail 4.5:1. While technically exempt, users with low vision can't read them. Fix: Use a medium gray with at least 3:1 contrast.
2. Colored text on colored backgrounds
Yellow text on white, or light blue on dark blue — both look fine in design software but fail in practice. Always check with a contrast checker.
3. Text over images or gradients
White text on a hero image might pass in the center but fail near light areas. Fix: Add a semi-transparent overlay or text shadow to ensure consistent contrast.
4. Thin font at small sizes
A 14px light font weight might technically pass 4.5:1 but still be hard to read. Consider AAA (7:1) for body text to add visual buffer.
5. Disregarding color blindness
Contrast ratio alone doesn't guarantee colorblind accessibility. Red-green combinations might have good contrast but be indistinguishable to 8% of men. Always check with a color blindness simulator.
How to Check Contrast on Your Website
There are several ways to audit your site's contrast:
- Our Color Contrast Checker: Paste your foreground and background hex codes. Instantly see if you pass AA and AAA, with WCAG 2.2 validation.
- Browser DevTools: In Chrome DevTools, inspect any text element and look for the "Contrast" line in the color picker. It shows the ratio and pass/fail.
- Lighthouse: Google's Lighthouse audit (in DevTools → Lighthouse tab) scans all text contrast on a page.
- axe DevTools: A browser extension that does comprehensive accessibility audits, including contrast.
The Difference Between WCAG 2.1 and 2.2 for Contrast
WCAG 2.2 (published in October 2023) added one new success criterion related to visual appearance: 2.4.11 Focus Not Obscured (Minimum) at level AA. It requires that focus indicators aren't completely hidden by other content — not directly a contrast issue, but related to visibility.
For contrast ratios specifically, WCAG 2.2 keeps the same AA and AAA thresholds as 2.0 and 2.1. The standards are stable; what changes is how we test for them and what UI elements they apply to.
Practical Tips for Better Contrast
- Design with contrast first, not last: Build your color palette to meet standards from the start, rather than fixing issues at the end.
- Use 8-point tints and shades: A systematic palette (like Tailwind's 50-950 scale) ensures you always have accessible options.
- Test both themes: If you have light and dark mode, test contrast for both — dark mode is not automatically more accessible.
- Check edge cases: Error states, success messages, disabled buttons, and link colors all need contrast checks.
Start Testing Now
Ready to check if your colors are accessible? Use our free Color Contrast Checker — it takes two seconds, gives you instant WCAG 2.2 AA/AAA results, and even suggests adjustments if your colors fail.