Understanding color vision deficiencies
About 8% of men and 0.5% of women have some form of color vision deficiency. That's roughly 300 million people. Designs that depend on color alone to convey meaning lock these users out of basic interactions — forms, dashboards, status indicators.
The main types
- Deuteranopia. Red-green confusion — the most common form.
- Protanopia. Reduced sensitivity to red light.
- Tritanopia. Rare; blue-yellow confusion.
- Monochromacy. Total color blindness; the world reads as grayscale.
WCAG contrast guidelines
AA — the minimum standard
- Normal text: at least 4.5:1 contrast against background.
- Large text (18pt+ or 14pt+ bold): at least 3:1.
- UI components and graphical objects: at least 3:1.
AAA — the enhanced standard
- Normal text: at least 7:1.
- Large text: at least 4.5:1.
Practical guidance
Do this
- Use color and a non-color cue — icons, text labels, patterns.
- Test palettes against a color-blindness simulator early, not at the end.
- Make focus rings visible on every interactive element.
- Provide enough contrast for body text without relying on font weight as a crutch.
Avoid
- Red and green as the only signal of success/failure.
- Faint placeholder text used as the field label.
- Light gray on white for anything that matters.
- Low-contrast hover states that disappear under bright office lighting.
The tools you actually need
Contrast
WebAIM Contrast Checker and our own contrast checkerboth verify AA/AAA in one shot and suggest the nearest passing color when a pair fails.
Simulation
Stark (Figma plugin), Coblis (web), and Chrome DevTools' rendering panel all simulate the main color-vision deficiencies. Run your hero, your CTAs, and any status indicators through each one.
Reliable accessible combinations
- #15110D on #FAF7F2 — ~17:1, comfortably AAA.
- #264653 on #FFFFFF — ~9:1, AAA for body.
- #1B5E20 on #FFFFFF — ~8:1, safe for success states.
- #A41B1B on #FFF5F5 — ~7:1, safe for error states.
Implementation checklist
Design phase
- Pick a palette that includes accessible default pairings.
- Document contrast ratios next to each color in your design system.
- Sketch states (default / hover / focus / disabled) for every interactive element.
Development phase
- Use semantic HTML — labels with inputs, headings in order, landmark elements.
- Render visible focus styles; never hide them outright.
- Provide text alternatives for icons that carry meaning.
Testing phase
- Tab through every flow with the keyboard.
- Run automated checks (axe, Lighthouse) and triage findings.
- Test with a screen reader on at least one critical flow.
- Recruit users with disabilities for the highest-confidence signal.