Color Blindness Simulator: Protanopia & Deuteranopia

simulator beginner ~7 min
Loading simulation...
ΔE ≈ 45 — significant color shift

An orange-red (#DC5028) shifts dramatically under protanopia simulation. The red component is nearly invisible, producing a muddy olive tone.

Formula

Protanopia matrix: [0.567, 0.433, 0; 0.558, 0.442, 0; 0, 0.242, 0.758]
Deuteranopia matrix: [0.625, 0.375, 0; 0.7, 0.3, 0; 0, 0.3, 0.7]
ΔE₂₀₀₀ = √((ΔL'/kL·SL)² + (ΔC'/kC·SC)² + (ΔH'/kH·SH)² + RT·(ΔC'/kC·SC)·(ΔH'/kH·SH))

Seeing Differently

Approximately 300 million people worldwide experience color vision deficiency. For most, the world is not grey — it is a different palette. Protanopes and deuteranopes see blues and yellows clearly but cannot distinguish reds from greens. A ripe red strawberry against green leaves may appear uniformly brown. Traffic lights look the same except for position. This simulator transforms any color through the lens of each deficiency type, revealing the perceptual gap that affects 1 in 12 males.

The Biology of Color Vision

Human color vision depends on three types of cone cells in the retina, each sensitive to different wavelengths: long (L, red), medium (M, green), and short (S, blue). Color blindness occurs when one cone type is missing or altered. Protanopia (missing L cones) and deuteranopia (missing M cones) are X-linked recessive conditions, explaining why males are affected 16 times more often than females, who have two X chromosomes providing a backup.

Simulation Methodology

This simulator uses the Brettel-Viénot-Mollon algorithm, which projects colors onto the reduced color space of each deficiency type. Normal trichromatic vision maps to a 3D color space; dichromatic vision collapses this to a 2D plane. The transformation matrix for each deficiency type projects every color onto this plane, accurately approximating the perceived color. The severity slider interpolates between normal and full deficiency to model anomalous trichromacy (partial deficiency).

Designing for Everyone

Accessible design is not just ethical — it is practical. When 8% of your male audience cannot see red-green distinctions, relying on color alone to convey information (red for errors, green for success) excludes millions of users. Best practices include using shape and texture alongside color, adding text labels to color-coded elements, choosing colorblind-safe palettes (blue-orange works well), and testing with simulation tools like this one. The Web Content Accessibility Guidelines (WCAG) formalize these principles for digital products.

FAQ

What is color blindness?

Color blindness (color vision deficiency) is the reduced ability to distinguish certain colors. It is usually inherited and caused by absent or altered cone photoreceptors in the retina. About 8% of males and 0.5% of females have some form. The most common types confuse red and green; tritanopia (blue-yellow confusion) is rare.

What is the difference between protanopia and deuteranopia?

Protanopia is the absence of red-sensitive (L) cones, causing red to appear dark. Deuteranopia is the absence of green-sensitive (M) cones. Both confuse red and green, but protanopes also lose brightness perception in the red range, making red traffic lights appear dim. Deuteranopia is more common.

How can designers make content accessible for color-blind users?

Never rely on color alone to convey information. Use shape, pattern, text labels, or icons alongside color. Ensure sufficient contrast. Avoid red-green combinations for critical distinctions. Test designs with color blindness simulators. The WCAG accessibility guidelines recommend a minimum contrast ratio of 4.5:1.

How does the color blindness simulation work?

The simulator applies a 3x3 color transformation matrix that models the cone response of each deficiency type. For protanopia, the L-cone response is replaced by a weighted combination of M and S cone responses. The result approximates what the color-blind person actually perceives. Severity interpolates between normal and full deficiency.

Sources

Embed

<iframe src="https://homo-deus.com/lab/color-science/color-blindness/embed" width="100%" height="400" frameborder="0"></iframe>
View source on GitHub