How common is color blindness?

Color vision deficiency affects approximately 8% of men and 0.5% of women with Northern European ancestry. Deuteranopia (green-weak) is the most common form, affecting about 5% of men. For a product with millions of users, not designing for color blindness excludes a significant portion of your audience.

What is the most common type of color blindness?

Deuteranopia (green-weak) is the most common type, affecting about 5% of men. It involves absent or modified medium-wavelength (green) cone cells, causing green/red and green/orange distinctions to collapse. This is why success/error color coding based solely on green/red is problematic.

How can I design for color blind users?

Never rely on color alone as a signal — always pair color with icons, text labels, or patterns. Ensure high luminance contrast, which helps all color vision types. Prefer blue/orange hue combinations over red/green. Test your UI with a color blindness simulator early in the design process.

Types of Color Blindness | State of Colors

Overview

Color blindness (color vision deficiency) affects roughly 8% of men and 0.5% of women with Northern European ancestry. It's caused by altered or absent cone photoreceptors in the retina.

Protanopia (Red-Weak)

Protanopia occurs when the long-wavelength (red) cones are absent. Red appears very dark, almost black, and is easily confused with black or dark gray. Red/green confusion is common.

**Design impact:** Red error states may be invisible. Never use red alone to signal errors.

Deuteranopia (Green-Weak)

Deuteranopia is the most common form (about 5% of men). The medium-wavelength (green) cones are absent or modified. Green/red and green/orange distinctions collapse.

**Design impact:** Green success states can look identical to red error states. Use icons + text alongside color.

Tritanopia (Blue-Weak)

Tritanopia affects the short-wavelength (blue) cones. Blue/green and yellow/red distinctions are affected. It's much rarer (~0.003% of the population).

**Design impact:** Blue links may be hard to distinguish from green text.

Achromatopsia (Total Color Blindness)

Achromatopsia means seeing only in shades of gray. It's very rare (~0.003%) and usually accompanied by low visual acuity and photophobia.

**Design impact:** Your entire UI must work purely on luminance contrast — no color signals whatsoever.

Design Principles

**Never use color as the only signal** — pair it with icons, patterns, or text labels

**Test with a simulator** — use our Color Blindness Simulator to preview your UI

**Ensure sufficient contrast** — high contrast helps all types of color vision

**Use distinguishable hues** — blue/orange combinations work better than red/green