Color Blindness Simulator

How to Use the Color Blindness Simulator

1. Enter a color in the HEX input or open the color picker to pick visually.
2. Click Simulate. The tool renders five swatches side by side: normal trichromatic vision, protanopia, deuteranopia, tritanopia, and achromatopsia.
3. Compare each swatch against the normal-vision baseline. Swatches that look nearly identical to neighbors represent real failure modes - the two colors are indistinguishable to that viewer.
4. Iterate: change the color and re-run until the critical pair in your UI (success/error, active/inactive) stays distinct under every simulated vision type.

What the Simulation Actually Computes

Color vision deficiency simulation is not a simple hue shift - it requires modeling how a deficient retina transforms light. The tool uses the Brettel-Vienot-Mollon algorithm, the standard reference in visual-accessibility research since their 1997 paper Computerized simulation of color appearance for dichromats. The algorithm transforms the input sRGB color into the LMS color space (named after the long, medium, and short cone response curves of the human retina), then projects the color onto a reduced plane where one of the three cone types is missing: the L-plane for protanopia, the M-plane for deuteranopia, the S-plane for tritanopia. For achromatopsia (total rod-only vision), the color is collapsed to its luminance value via the standard Rec. 709 luma coefficients. The transformed LMS color is converted back to sRGB through the inverse matrix and gamma-corrected for display. The tool applies the published Hunt-Pointer-Estevez LMS matrix and Brettel\'s pre-computed projection matrices for each deficiency type, so the output matches what academic simulators like Vischeck and Coblis have been producing for two decades.

Where This Matters in Practice

• Chart and graph color palettes, where a red-green combo renders indistinguishable to the 4-5% of users with deuteranomaly - ColorBrewer\'s "colorblind-safe" palettes exist for exactly this reason.
• Traffic-light status indicators (red error, yellow warning, green success) - the canonical red-green failure case - where you must pair color with an icon shape or text label.
• Data visualizations using heatmaps or divergent color scales, where tritanopic users lose the blue-yellow axis that designers lean on as "the colorblind-safe axis".
• Form validation, where red-outlined fields for errors must be paired with text or icons under WCAG 1.4.1 (Use of Color).
• Gaming UIs where team colors (red vs green, blue vs purple) must remain distinct for competitive fairness.

Pitfalls and Scientific Limits

First, the simulator models dichromacy - the total absence of one cone type - which is the severe end of the spectrum. Most color-deficient users are anomalous trichromats (protanomaly, deuteranomaly, tritanomaly), who have a shifted rather than absent cone and perceive more color than the simulated dichromat but less than a normal trichromat. Simulating anomaly requires a parametric model with a severity slider, which this tool does not expose; assume the simulation is the worst case and your actual users will see slightly more differentiation than shown. Second, monitor calibration matters: the algorithm assumes sRGB output on a standard display. On a wide-gamut P3 display rendering content tagged as sRGB, the OS color management should translate correctly, but if you are evaluating colors on an uncalibrated laptop screen, the absolute accuracy drops. Third, the Brettel model is an approximation: real color vision is a continuous perceptual phenomenon and no matrix transform captures every user\'s subjective experience. Fourth, context changes perception: two colors that look identical in isolation may be distinguishable when adjacent to a third color that provides a reference, so the side-by-side simulation here is a strict lower bound on real-world distinguishability. Fifth, never rely on color alone - WCAG 1.4.1 predates this simulator and its guidance is universal: every color cue needs a redundant non-color cue (icon, label, pattern).

The Biology Behind the Algorithm

Normal vision is trichromatic: three cone types with peak sensitivity near 564 nm (L), 534 nm (M), and 420 nm (S). The LMS color space describes any perceived color as a triple of cone activations. Protanopia is the absence of L cones - red light is effectively invisible. Deuteranopia is the absence of M cones, producing the classic red-green confusion and affecting roughly 1% of males of northern European descent. Tritanopia is the absence of S cones; very rare (<0.01%) and attacks the blue-yellow axis designers treat as "safe". Achromatopsia is total cone dysfunction, leaving only rod-mediated luminance perception. The Brettel algorithm exploits the fact that dichromatic vision equals projecting LMS onto the plane of the two working cone types plus the luminance axis.

Comparison to Other Simulators and Audit Tools

Chrome DevTools ships a color-vision emulator in the Rendering tab (protanopia, deuteranopia, tritanopia, achromatopsia, and blurred vision) that applies the transform to the entire rendered page - use it when you want to audit a live site rather than a single color. Stark and axe DevTools run whole-page scans for WCAG 1.4.1 violations, which is a complementary check: this simulator tells you what a color looks like, Stark tells you whether the pair of colors passes contrast in each deficiency. Vischeck (now defunct but widely cited) and Coblis are academic peer tools that use the same Brettel matrices. For video games and apps, the platform SDKs increasingly bake in system-wide simulation (macOS has had dichromacy display filters in Accessibility settings for years). Use this simulator for designing a single color or a small palette; use DevTools or Stark for whole-page audits.