Over 96% of the top million websites have detectable accessibility failures, and color contrast is consistently the most common issue. That's not because designers don't care — it's because contrast thresholds aren't intuitive. What looks "fine" to a 25-year-old with perfect vision can be completely illegible to someone with low vision, color blindness, or anyone viewing your site in sunlight on a phone.
This guide covers everything: what WCAG requires, how contrast ratio is calculated, the most common mistakes, and (most importantly) how to check and fix your colors in seconds with our free tools.
🔍 Check Your Colors Now
Enter any text and background color — get instant WCAG AA/AAA compliance results. Free, no signup.
Open Contrast Checker →What Is Color Contrast (and Why It Matters)
Color contrast is the perceived difference in luminance (lightness) between two adjacent colors — typically text and its background. When contrast is too low, text becomes hard or impossible to read. This affects:
- ~285 million visually impaired people worldwide, including those with low vision, cataracts, or macular degeneration
- ~300 million color-blind individuals (~8% of males, ~0.5% of females) who may not distinguish certain color pairs
- Everyone in challenging conditions: bright sunlight on a phone screen, old monitors, projected presentations
- Older adults who need roughly 3x more contrast than 20-year-olds to read comfortably
WCAG Contrast Requirements: AA vs AAA
The Web Content Accessibility Guidelines (WCAG) 2.1 define three compliance levels:
| Level | Normal Text | Large Text* | What It Means |
|---|---|---|---|
| A | No requirement | No requirement | Basic accessibility — contrast not addressed at this level |
| AA | ≥ 4.5:1 | ≥ 3:1 | Legal minimum in many jurisdictions. Required for most government/enterprise sites. |
| AAA | ≥ 7:1 | ≥ 4.5:1 | Gold standard. Enhanced accessibility. Not always achievable for all content. |
*Large text = 18px+ (24px on web) regular weight, or 14px+ (18.67px) bold.
How Contrast Ratio Is Calculated
Our tool uses the official WCAG formula — here's what happens under the hood:
- Extract sRGB values from hex codes (0–255 per channel)
- Linearize using gamma correction: values ≤ 10 get divided by 3294.6; larger values get raised to the power of 2.4 after scaling
- Calculate relative luminance: L = 0.2126 × R + 0.7152 × G + 0.0722 × B (green dominates because human vision is most sensitive to it)
- Compute ratio: (L_lighter + 0.05) / (L_darker + 0.05)
The formula ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). Anything below 3:1 is almost certainly an accessibility problem.
Common Contrast Values
| #000000 on #FFFFFF | 21.00:1 | ✅ AAA |
| #333333 on #FFFFFF | 12.63:1 | ✅ AAA |
| #666666 on #FFFFFF | 5.73:1 | ✅ AA |
| #999999 on #FFFFFF | 2.85:1 | ❌ Fail |
| #FF0000 on #FFFFFF | 4.00:1 | ⚠️ AA large only |
| #FFFFFF on #000000 | 21.00:1 | ✅ AAA |
The Top 5 Color Contrast Mistakes
1. Light Gray Text on White Backgrounds
This is the single most common issue. Designers use #999 or #aaa for "subtle" text — secondary labels, placeholder text, footnotes. These fail AA for normal text (ratio ~2.8:1). Use at least #767676 for AA compliance on white.
2. Blue Links on Dark Backgrounds
Default blue (#0000EE) on dark backgrounds like #1a1a2e yields ~2.1:1 — invisible to many users. Either lighten the blue or use a lighter background. Our contrast checker makes this easy to dial in.
3. Red Text for Errors
Pure red (#FF0000) on white is only 4.00:1 — it passes AA for large text but fails for normal text. Use a darker red like #c5221f (4.87:1, passes AA) or #b71c1c (8.04:1, passes AAA).
4. Low-Contrast Buttons
Buttons with colored backgrounds and white text often seem fine but fail when you check. Example: orange #FF9800 with white text = 1.88:1 (fails everything). Test every button color combination.
5. Text Over Images
Text overlaid on photographs is notoriously hard to get right because the background varies. Use a semi-transparent overlay, text shadow, or a solid background behind the text. If you must do image text, test the worst-case point.
🎨 Test Your Colors
Paste your hex codes into our free contrast checker and see instantly if they pass WCAG AA/AAA. Color picker + preset swatches included.
Open Contrast Checker →Designing for Accessibility from Day One
Retrofitting accessibility is expensive. Building it in is free. Here's a practical workflow:
- Define your palette early and check every color pair with the contrast checker before writing CSS
- Set up a design token system — name your colors (e.g.,
text-primary,text-muted) and enforce contrast at the token level - Use our bulk domain checker to audit all your properties at once — catch issues across dev, staging, and production
- Add contrast checks to CI/CD — use our API (Pro plan, €9/month) to validate color pairs automatically during builds
FAQ
Is WCAG AA legally required?
In many jurisdictions, yes. Section 508 (US federal), EN 301 549 (EU), and ADA Title III have all been interpreted to require WCAG 2.1 AA compliance for websites. Even if not legally required for your specific case, AA compliance protects you from lawsuits and expands your audience.
Do I need to check contrast for decorative elements?
No. WCAG contrast requirements only apply to text and meaningful visual elements (icons, focus indicators, graphs). Purely decorative elements — background patterns, dividers, decorative borders — are exempt. But when in doubt, check.
Does dark mode have different contrast requirements?
The same WCAG thresholds apply regardless of color scheme. Light text on dark backgrounds often needs a slightly lighter shade than you'd expect — pure white on pure black is 21:1 (great), but #ddd on #111 is only 11.5:1 (still AAA). The formula works symmetrically.