Color blindness simulator
Simulate protanopia, deuteranopia and tritanopia with the Brettel/Viénot dichromacy matrices, showing the original and simulated hex, relative luminance and how the contrast ratio shifts.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Simulation settings
Pick a foreground and background, choose a type and severity, and the result updates immediately.
0% is normal vision, 100% is full dichromacy; values in between model anomalous trichromacy.
Result
Simulation follows the Brettel / Viénot / Mollon dichromacy approximation (JOSA A 1997, 1999): sRGB is linearized, multiplied by a 3×3 matrix and encoded back. Every matrix row sums to 1, so greys stay put.
Foreground (text / icon) #FF0000
4.00:1
Foreground (text / icon) #5E5E0D
6.81:1
#FF0000 → #5E5E0D#FFFFFF → #FFFFFF4.00:16.81:1 (Ratio change +2.81)0.2126 → 0.1041Common hues under the selected type: original on the left, simulated on the right.
What this tool does
- Sanity-check a chart palette: drop the red and green series in and see whether a red-green colorblind reader can tell them apart (after simulation they often look identical).
- Test status colors like "red for error, green for success" — that pair is the classic collision and usually turns into the same muddy yellow.
- Screen an accessible design before adding a second cue such as an icon or a text label.
- Set severity to about 50% to model anomalous trichromacy rather than full dichromacy.
Example
Input
Foreground #FF0000, background #FFFFFF, type "Protanopia", severity 100%
Output
The foreground simulates to #5E5E0D while the background stays #FFFFFF; the ratio moves from 4.00:1 to 6.81:1 (+2.81) and relative luminance goes 0.2126 → 0.1041.
Under protanopia pure red collapses to a dark yellow and loses luminance, so its contrast on white grows — while the ability to separate red from green is gone.
Frequently asked questions
Which algorithm is used?
The Brettel / Viénot / Mollon dichromacy approximation from JOSA A (1997, 1999): sRGB channels are linearized, multiplied by a 3×3 matrix and encoded back. Each matrix row sums to exactly 1, so pure white and every grey stay unchanged.
How do protan, deutan and tritan differ?
Protanopia lacks the L cone, so reds darken; deuteranopia lacks the M cone, so red and green both drift towards yellow-brown; tritanopia lacks the S cone, confusing blue and yellow and affecting roughly 0.01% of people. The first two each affect about 1% of men, which is why red-green palettes need the most care.
What does the severity slider do?
At 0% the color is untouched, at 100% the full dichromacy matrix applies, and values in between interpolate linearly between the identity and that matrix to approximate anomalous trichromacy. It is an approximation, not a medical test.
Why can the simulated contrast go up?
The matrix redistributes luminance: pure red becomes the darker #5E5E0D under protanopia (contrast on white rises from 4.00:1 to 6.81:1) and the lighter #939300 under deuteranopia (contrast drops to 3.27:1). A higher ratio does not make a palette safer — the real risk is two different colors collapsing into the same one.
Are my colors uploaded?
No. Every matrix operation runs in the browser, the page makes no requests, and nothing you enter is stored.
Keywords：color blindness simulatorprotanopiadeuteranopiatritanopiacolor vision deficiency色盲模拟色弱模拟红绿色盲色觉障碍对比度变化