Color is one of the most powerful tools in web design — but if your color choices exclude people with low vision or color vision deficiency, you're leaving users behind. Roughly 8% of men and 0.5% of women have some form of color blindness. Beyond that, aging eyes, bright sunlight, and low-quality screens all reduce contrast perception.
The good news? Picking accessible colors isn't hard once you understand the rules. This guide walks you through the WCAG contrast requirements, practical techniques for choosing compliant palettes, and free tools you can use right now.
What is WCAG and why does contrast matter?
The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility. They define minimum contrast ratios between text and its background so that content remains readable for people with visual impairments.
Contrast ratio is measured on a scale from 1:1 (no contrast — same color) to 21:1 (maximum contrast — pure black on pure white). WCAG defines two conformance levels:
- AA (minimum) — 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold)
- AAA (enhanced) — 7:1 for normal text, 4.5:1 for large text
Most legal requirements (ADA, EU Accessibility Act) reference WCAG AA as the baseline. AAA is recommended where possible but not always mandatory.
Step 1: Start with a contrast checker
Before you finalize any color pair, test it. Plug your text color and background color into a contrast checker and verify it meets at least 4.5:1 for body text. This takes seconds and saves you from shipping inaccessible designs.
If your chosen pair fails, don't scrap the hue — adjust the lightness. A slightly darker shade of blue on white may pass where the original didn't. You can darken the color incrementally until the ratio clears the threshold.
Step 2: Build an accessible palette from the start
Rather than fixing contrast problems one at a time, use an accessible color palette generator that bakes WCAG compliance into every swatch. These tools generate full palettes where every foreground/background combination passes AA or AAA automatically.
A solid accessible palette typically includes:
- A dark and light neutral pair for primary text and backgrounds
- A brand accent color that passes 4.5:1 on both light and dark backgrounds
- A secondary accent for links and interactive elements
- Semantic colors (success green, error red, warning yellow) that pass contrast
Step 3: Don't rely on color alone
Even with perfect contrast ratios, never use color as the only way to convey information. If a required form field is highlighted in red, also add an icon, border change, or text label. This is WCAG Success Criterion 1.4.1 (Use of Color).
For charts and data visualizations, use patterns, labels, or varying line styles alongside color. You can test how your designs look to colorblind users with a color blindness simulator.
Step 4: Test in dark mode too
A color pair that passes in light mode may fail in dark mode. If your site supports theming, test every mode. Light text on dark backgrounds often needs different lightness values than the inverse. Aim for both modes to independently meet WCAG AA.
Step 5: Consider the full spectrum of vision
Color accessibility isn't just about contrast ratios. Consider:
- Deuteranopia (green-blind) — the most common form, affecting ~6% of men
- Protanopia (red-blind) — reds appear much darker
- Tritanopia (blue-blind) — rarer, but blue/yellow distinctions are lost
- Low vision — users who zoom to 200%+ or use screen magnifiers
Running your palette through a color blindness simulator reveals issues you'd never spot with typical vision.
Quick checklist
- Test every text/background pair with a contrast checker — aim for 4.5:1 minimum
- Use an accessible palette generator to build compliance in from the start
- Never rely on color alone — add icons, labels, or patterns
- Simulate color blindness to catch issues beyond contrast ratios
- Test light mode and dark mode independently
- Re-check after design revisions — a brand color tweak can break compliance
Tools to help
All of these are free, run in your browser, and require no sign-up:
- Color Contrast Checker — test any foreground/background pair against WCAG AA and AAA
- Accessible Color Palette Generator — build a full palette that passes contrast requirements
- Color Blindness Simulator — preview your colors through different types of color vision deficiency
Accessible design isn't a constraint — it's a quality bar. Colors that work for people with low vision tend to look cleaner and more professional for everyone. Start with contrast, test often, and ship designs that include all your users.