The Four Types of Color Vision Deficiency
Color blindness isn't seeing in black and white (that's monochromacy, and it's extremely rare). Most color vision deficiency is about difficulty distinguishing specific color pairs:
Protanopia / Protanomaly (Red-Weak)
- Affects: ~1% of males. Missing or anomalous red cones (L-cones).
- What it looks like: Reds appear dimmer, sometimes greenish. Red and green, blue and purple, and pink and gray become hard to distinguish.
- Design impact: Red text or icons lose emphasis. Red error messages blend into surrounding text for protanopic users.
Deuteranopia / Deuteranomaly (Green-Weak)
- Affects: ~5–6% of males — the most common form. Missing or anomalous green cones (M-cones).
- What it looks like: Very similar to protanopia in practice. Greens and reds look alike. Green items may appear beige or brown.
- Design impact: Green "success" indicators and red "error" indicators look nearly identical. Never rely on red/green alone to communicate state.
Tritanopia / Tritanomaly (Blue-Weak)
- Affects: Very rare (<0.01% of population). Missing or anomalous blue cones (S-cones).
- What it looks like: Blues appear greenish, yellows appear pinkish or gray. Blue and yellow become hard to distinguish.
Monochromacy (Total Color Blindness)
- Affects: Extremely rare (~1 in 33,000). No functioning cones.
- What it looks like: The world in shades of gray. Vision often comes with additional challenges like light sensitivity and reduced acuity.
Designing for Color Accessibility
- Never use color alone: Error and success states need icons, text labels, or patterns — not just green and red borders.
- Charts and graphs: Use patterns (dots, stripes, crosshatching) in addition to colors. Label data directly instead of relying on a color legend.
- Links: Underline links. Don't rely on color alone to distinguish linked text from body text.
- Heatmaps and data visualizations: Use a single-hue gradient (light to dark blue) instead of red/green diverging scales. Okabe-Ito and Viridis palettes are designed to be color-blind safe.
- Gamification and badges: Don't use "red = bad, green = good" as the only differentiator. Add a checkmark or X icon.
Simulate Your Colors Now
Use ToolsVito's Color Blindness Simulator to preview any color palette through the lens of protanopia, deuteranopia, tritanopia, and monochromacy. See your design as your users see it. All simulation happens in your browser.