Color Blindness Simulator
Preview any design through deuteranopia, protanopia, and tritanopia. Upload an image or use the built-in UI preview, then check whether your color pairs still pass WCAG contrast under each deficiency. All simulation runs in your browser — nothing is uploaded.
Without an upload, the simulator previews a built-in UI mockup (buttons, badges, alerts, chart) plus a color swatch grid.
Normal vision
Deuteranopia red-blind · ~1 in 12 men
Protanopia red-weak · ~1 in 100 men
Tritanopia blue-blind · very rare
WCAG contrast impact
Contrast is recomputed after each deficiency's color matrix is applied to both colors. Green passes at 4.5:1 (AA normal text); gold at 3:1 (AA large text); red fails both.
Test your own page
Paste this one-liner in your browser DevTools console to simulate deuteranopia on any live page. The SVG filter definitions above are inlined, so it works on any site.
What We Learn
Color is never information's only carrier
In the tritanopia panel, red and green chart bars converge to near-identical muddy tones. If your success/error states, chart series, or status badges differ only by hue, roughly 8% of male users cannot tell them apart. Icons, labels, and shape differences are the redundancy that survives every matrix.
Contrast ratios are a model of vision — simulate the real thing
A WCAG ratio is computed in normal trichromatic space. A pair that passes 4.5:1 can collapse below 3:1 after the deuteranopia matrix because the matrix changes relative luminance itself. Agents that check contrast once are checking a proxy; checking it under three matrices checks the property users actually experience.
Simulation is cheap; retrofitting is not
The entire simulator is three feColorMatrix definitions — a few hundred bytes, no backend, no model inference. An agent can run this check during build for free, the same way it lints. Accessibility failures discovered at build time cost nothing; the same failures found by users cost trust.
How It Works
Color blindness is a missing or shifted cone response. Dichromacy (two working cones) can be modeled as a linear projection: every visible color is mapped onto the 2D plane that a dichromat actually perceives. The standard approach — Machado, Oliveira & Fernandes (2009) — expresses each deficiency as a 3×3 matrix applied to linear RGB, which is exactly what SVG's feColorMatrix does.
This tool defines one filter per deficiency:
- Deuteranopia (missing M-cone): greens lose redness; red/green pairs collapse toward yellow-gray.
- Protanopia (missing L-cone): reds darken dramatically — red on black can vanish entirely because perceived luminance drops.
- Tritanopia (missing S-cone): blues and yellows confuse; the rarest of the three.
The WCAG section applies the same matrices in JavaScript: convert each hex color to sRGB, apply the 3×3 matrix, clamp, then compute relative luminance per the WCAG 2.1 formula, L = 0.2126R + 0.7152G + 0.0722B with gamma expansion. The ratio (L1 + 0.05) / (L2 + 0.05) is reported for normal vision and each simulation, so you can see exactly where a passing pair breaks.