Most designers pick colors based on what looks good. That's fine — until someone can't read your website. About 8% of men and 0.5% of women experience some form of color blindness. Add aging eyes, cheap monitors, and outdoor glare to the mix, and suddenly your beautiful brand palette is locking people out.
Here's the thing: accessible colors don't have to look boring. You just need to know the rules and test before you ship.
What WCAG contrast actually means
WCAG — the Web Content Accessibility Guidelines — sets minimum contrast ratios between text and background colors. The ratio runs from 1:1 (identical colors, zero contrast) to 21:1 (pure black on pure white).
There are two levels that matter:
- AA — 4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular)
- AAA — 7:1 for normal text, 4.5:1 for large text
Most accessibility laws — ADA in the US, the European Accessibility Act — point to AA as the floor. AAA is a stretch goal worth hitting when you can.
So what is the minimum contrast ratio for WCAG AA? It's 4.5:1 for body text. That number should be burned into your brain if you're making color decisions for the web.
Check your colors before you ship them
You've picked a nice blue for your headings. Does it actually pass? Don't guess. Open a Color Contrast Checker, drop in your text color and background color, and you'll see the exact ratio in seconds. It'll tell you whether you're passing AA, AAA, both, or neither.
How do you check if your colors are accessible? Exactly like that. Paste two hex codes, get a pass/fail result. It takes less time than brewing coffee.
If your pair fails, don't panic. You usually don't need a completely different hue — just adjust the lightness. A slightly darker version of that blue on a white background might clear 4.5:1 easily. Small tweaks, big difference.
Build your palette with accessibility baked in
Fixing contrast problems one pair at a time gets tedious fast. A smarter approach: start with a palette that's already compliant.
An Accessible Color Palette Generator does exactly this. Feed it your brand color and it spits out a full set of shades where every foreground/background combo passes WCAG. No more guesswork, no more "I'll fix the contrast later" (you won't).
A well-built accessible palette usually covers:
- Dark and light neutrals for text and backgrounds
- A brand accent that hits 4.5:1 on both light and dark surfaces
- A secondary accent for links and interactive states
- Semantic colors — success green, error red, warning amber — that all pass contrast
When you start from a solid foundation, you don't end up retrofitting accessibility at the last minute.
Color alone isn't enough
Even if every contrast ratio on your site is perfect, you're still not done. WCAG Success Criterion 1.4.1 says you can't use color as the only way to communicate meaning.
Picture a form where required fields are marked with a red border and nothing else. Someone with protanopia (red-blindness) might not see that border at all. Add a text label, an asterisk, or an icon alongside the color cue.
Same goes for charts. If your bar chart uses green for profit and red for loss, a deuteranopic user might see two nearly identical colors. Use patterns, labels, or hatching in addition to color.
Simulate what colorblind users actually see
You can stare at your design all day and miss problems that are obvious to someone with color vision deficiency. That's why simulation matters.
A Color Blindness Simulator shows you how your colors appear under different types of color vision:
- Deuteranopia — the most common type, affecting about 6% of men. Greens and reds blur together.
- Protanopia — reds look much darker and harder to distinguish from greens.
- Tritanopia — rarer, but blues and yellows become hard to tell apart.
Can colorblind users see all color combinations? No. That's exactly why you shouldn't rely on any single color pair to carry meaning. Run your full design through a simulator and you'll catch problems that contrast ratios alone won't reveal.
Don't forget dark mode
A color pair that sails through AA on a white background might flop on a dark gray one. If your site has a dark mode — and most do now — you need to test both themes independently.
Light text on dark backgrounds usually needs different lightness values than dark text on light backgrounds. Don't assume that reversing your palette keeps the same ratios. It won't.
A practical checklist
- Test every text/background pair against 4.5:1 using a contrast checker
- Generate your palette with an accessible palette tool instead of fixing contrast after the fact
- Never rely on color alone to convey information — pair it with text, icons, or patterns
- Run your designs through a color blindness simulator for all three major types
- Test light mode and dark mode separately
- Re-check after every brand color revision — one hex code change can break compliance across your whole site
FAQ
What is the minimum contrast ratio for WCAG AA?
WCAG AA requires at least 4.5:1 for normal-sized text and 3:1 for large text (defined as 18px bold or 24px regular). Most legal accessibility standards reference AA as the baseline.
How do I check if my colors are accessible?
Use a contrast checker that takes your text and background colors and reports the contrast ratio along with WCAG pass/fail status. You can also use an accessible palette generator to build compliance into your design system from the start.
Can colorblind users see all color combinations?
No. Roughly 8% of men and 0.5% of women have some form of color vision deficiency. Red-green combinations are the most problematic, but blue-yellow can also cause issues. Always test with a color blindness simulator and make sure color isn't the sole indicator of meaning.
Accessible color choices aren't a design limitation — they're a quality signal. Sites that pass WCAG contrast tend to look cleaner and more professional to everyone, not just users with visual impairments. Test early, test often, and stop treating a11y as an afterthought. Your users will thank you.