Color Blindness Simulator

Overview

Preview three colors and a line of sample text as they appear with protanopia, deuteranopia, tritanopia and total color blindness, side by side with normal vision. Built on real color-transform matrices, it shows instantly whether your palette's meaning survives color-vision deficiency.

How It Works

Pick three colors with the color inputs — for example a status palette's red, green and blue — and optionally edit the sample text. The panel renders five rows: normal vision, protanopia, deuteranopia, tritanopia and achromatopsia, each row showing your three swatches and your sample text under that condition. Compare rows: if two swatches become indistinguishable in a row, that pair cannot carry meaning on its own for viewers with that deficiency. The closing note reminds you to add icons, labels or patterns as a redundant channel.

Step-by-Step Usage Guide

1. Set the three colors you are evaluating — a status trio, chart series or brand palette.
2. Type realistic sample text so you can judge text-on-background legibility too.
3. Compare each deficiency row against Normal vision; look specifically for pairs that collapse together.
4. Where colors collide, add a redundant cue — icon, label, pattern or position — and re-check.

Technical Specifications & Standards

The simulation applies color-vision-deficiency transform matrices via SVG feColorMatrix filters, one per dichromacy type, plus CSS grayscale(1) for achromatopsia. The matrices are the simplified Machado/Brettel-style linear approximations widely used for this purpose: protanopia mixes red into green (matrix rows 0.567/0.433 and 0.558/0.442) because the long-wavelength cones are missing; deuteranopia, the most common deficiency, blends green into red (0.625/0.375 and 0.7/0.3); tritanopia, the rare blue type, collapses blue into green (0.95/0.05, 0.433/0.567, 0.475/0.525). The tool's own labels carry the epidemiology that matters for design decisions: red-green deficiencies affect roughly 1 in 12 men (about 8 percent) and about 1 in 200 women, with the deutan type the largest share, while tritanopia is rare. Honest limits: these are linear approximations of a nonlinear perceptual process, so they indicate severity rather than reproduce exact perception, and they simulate dichromacy rather than the milder anomalous trichromacy most affected people actually have.

Targeted Use Cases

• Validating a success/error/warning color scheme before shipping it to a general audience.
• Choosing distinguishable chart series colors that survive red-green color blindness.
• Checking whether a red/green diff or validation highlight leaves deuteranope users with no signal.
• Demonstrating to stakeholders, with their own brand colors, why color-alone signalling fails accessibility review.

Notes & Gotchas

• Never rely on color alone; pair red/green signals with icons or text labels that carry the same meaning.
• Test with your actual colors, not generic examples — collisions depend on the specific hues.
• Prefer palettes that differ in lightness as well as hue; lightness survives every deficiency type.
• Remember the simulation approximates complete dichromacy; mildly affected users see something between the rows.

Frequently Asked Questions