Color Blindness Simulator

What color blindness actually is

Typical human color vision uses three types of cone cell, each most sensitive to a different band of light: L (long / red), M (medium / green) and S (short / blue). Color blindness is not seeing in black and white — it is usually one cone type being missing or shifted, which collapses part of the color space so that colors that used to be distinct now map to the same sensation. Roughly 8% of men and 0.5% of women of Northern-European descent have some form, almost all of it red-green. Because the gene sits on the X chromosome, it is far more common in men, who have only one copy.

The four types this tool shows

Protanopia and deuteranopia are the two red-green deficiencies and behave similarly, with one telling difference: a protanope also sees reds as darker (their missing cone was the one most sensitive to red light), while a deuteranope keeps roughly normal brightness. Tritanopia is a blue-yellow loss and is genuinely rare. This tool renders the full dichromat form — the complete loss of a cone — which is the strongest case; many people have a milder anomalous trichromacy that lands somewhere between normal vision and these images.

How the simulation is computed

Each pixel travels through the same short pipeline. Its sRGB channels (the 0–255 numbers behind the hex code) are first linearized — sRGB is gamma-encoded so its values are perceptually even rather than proportional to light, and cone responses are linear in light. The linear triple is then multiplied by a published 3×3 simulation matrix for the chosen deficiency, the result is clamped back into the [0,1] display gamut (a projection onto a reduced color space can otherwise land just outside it), and finally re-encoded to sRGB. Achromatopsia skips the matrix and instead computes Rec.709 luminance — 0.2126·R + 0.7152·G + 0.0722·B in linear light — so the gray it produces matches how bright each color truly is.

Two details matter for honesty. First, the matrices are copied verbatim from Machado, Oliveira & Fernandes (2009); they are not eyeballed or tuned here. Second, doing the multiply in linear light rather than straight on the gamma-encoded hex is the step most web simulators skip — and skipping it visibly shifts hues and crushes midtones. You can verify the pure math yourself: the compute is exported as a Node module with committed golden-vector tests.

Designing so color-blind users aren't left out

The single most useful rule is never encode meaning with color alone (it is literally WCAG success criterion 1.4.1). Practical moves that survive every type above:

• Add a second channel. Pair color with text labels, icons, shapes, or patterns — a dashed vs solid chart line reads even in full grayscale.
• Lean on lightness. Color blindness largely preserves luminance contrast, so a clear light-vs-dark gap between two swatches keeps them apart when hue fails. Our contrast checker measures exactly that gap.
• Prefer blue/orange over red/green. Blue and orange stay distinct under all the common red-green types; red and green are the classic trap.
• Test the worst case. Run your real screenshots and palettes through the dichromat views here — if two things must be told apart and they merge, fix the design, not the simulator.

Honest limits

This is a model, not a person. It renders one representative version of each deficiency; actual color perception varies between individuals, shifts with lighting and adaptation, and milder anomalous forms are common. It works in sRGB and treats wide-gamut (Display-P3) content as sRGB. It is not a diagnosis and not medical advice — if you want to know your own color vision, an eye-care professional administers proper tests (Ishihara plates, the Farnsworth-Munsell 100 hue). What it is good for is a fast, private, worst-case check that your images and palettes still communicate when a cone is missing. Everything runs locally; nothing you load is uploaded.