Tool

Color blindness simulator

Four conditions, one color. Standard published methodology, for checking your work.

Protanopia

#5A5ADA

No L (long-wavelength) cones. Reds appear darker and shift toward gold; red-green discrimination is severely affected.

≈ 1% of men, < 0.01% of women

Deuteranopia

#5650D3

No M (medium-wavelength) cones. The most common form of color blindness. Reds and greens collapse into similar muddy yellow-browns.

≈ 1% of men, < 0.01% of women

Tritanopia

#3FC4BF

No S (short-wavelength) cones. Blues and yellows lose distinction; the rare "blue-yellow" form of color blindness.

≈ 0.001% of population

Achromatopsia

#7A7A7A

No functional cones — only rod vision. The world appears in shades of grey. Often accompanied by light sensitivity and reduced visual acuity.

≈ 0.003% of population

What is color vision deficiency?

Color vision deficiency (commonly "color blindness") affects roughly 1 in 12 men and 1 in 200 women globally. The most common forms are inherited and result from missing or atypical photoreceptor cones. The three types of cones — long (L), medium (M), and short (S) wavelength — correspond loosely to red, green, and blue sensitivity. A condition is named for the cone type that's missing or non-functional.

This tool simulates the four most-cited conditions: protanopia (no L cones), deuteranopia (no M cones), tritanopia (no S cones), and achromatopsia (no functional cones at all). Anomalous trichromacies — where a cone is present but shifted in sensitivity — are not shown; their visual appearance interpolates between the dichromatic extremes.

How the simulation works

The transformation matrices used here are derived from Brettel, Viénot, & Mollon (1997), "Computerized simulation of color appearance for dichromats" (Journal of the Optical Society of America A, 14(10), 2647–2655) — the canonical reference for dichromatic color simulation. The original method projects each color onto a "dichromatic confusion plane" in LMS cone space; the RGB-space approximation we use produces visually equivalent output for the typical use case (checking whether a UI design remains legible under common forms of color blindness).

Designing for color blindness

  • Don't rely on color alone to convey information. Pair color with shape, label, position, or iconography. WCAG 2.1 SC 1.4.1.
  • Test red-green pairings carefully. The most common dichromacies (protanopia, deuteranopia) collapse red and green into similar muddy yellows.
  • Use sufficient contrast. Even with a perceptible hue difference, low contrast amplifies the impact of color vision deficiency.
  • Test the achromatic case with a grayscale render of your design. If it survives in monochrome, it survives anywhere.