Color blindness simulator
About one man in twelve has a color vision deficiency, and none of them will file a bug saying they could not tell your error state from your success state. Put a palette in below and it is redrawn through eight conditions, from the mild green-weakness most people who have it have never been told about, through to no color vision at all. Underneath, the part most simulators leave out: which two of your colors became the same color.
Simulate your palette
Edit the swatches, add your own, or arrive here from the palette generator or the image extractor with a palette already loaded. The colors live in the address bar, so a link carries them.
- #DC3545
- #28A745
- #FFC107
- #0A84FF
- #6F42C1
| Vision | DC3545 | 28A745 | FFC107 | 0A84FF | 6F42C1 |
|---|---|---|---|---|---|
| Typical vision | |||||
| Deuteranomaly | |||||
| Protanomaly | |||||
| Deuteranopia | |||||
| Protanopia | |||||
| Tritanomaly | |||||
| Tritanopia | |||||
| Achromatomaly | |||||
| Achromatopsia |
3 conditions merge colors in this palette
- Deuteranopia
- #DC3545#28A745apart by 33.9, down to 1.8
- Tritanopia
- #28A745#0A84FFapart by 31, down to 3.4
- Achromatopsia
- #28A745#0A84FFapart by 31, down to 3.7
- #DC3545#0A84FFapart by 36.4, down to 5.4
- #DC3545#6F42C1apart by 28.2, down to 8.4
- #DC3545#28A745apart by 33.9, down to 9.1
The numbers are perceptual distance in OKLab. Below 10 the two are close enough that nobody will separate them at a glance, seen one at a time, without the other beside it for comparison.
The status colors every framework ships
Red for danger and green for success is the most common color pairing in software, and it is the exact pairing a red-green deficiency removes. These are the published defaults from five design systems, not examples picked to make a point. 5 of the 5 collapse for at least one of the two red-green forms.
| System | As authored | Deuteranopia | Protanopia |
|---|---|---|---|
| Bootstrap 5 | 30.6 | 10.6 | 5.2 |
| Tailwind (500) | 36.4 | 5.5 | 19.4 |
| Material | 32.2 | 5.2 | 12.7 |
| iOS system | 37.5 | 5.9 | 19.0 |
| Ant Design | 36.7 | 2.0 | 17.5 |
The number is perceptual distance in OKLab, where 30.6 is the comfortable gap a reader with typical color vision gets and anything under 10 is close enough that nobody will separate the two at a glance. Bootstrap is the interesting row: its pair survives deuteranopia and fails protanopia, because a protanope loses red brightness as well as red hue, and Bootstrap's green is dark enough that the two land on the same lightness. There is no single red-green test to pass.
Color names that stop being different colors
Run the 142 colors in the color library against each other and 762 of the 10,011 pairs merge for a deuteranope. These are the starkest, one color used once each, and every one of them is a pair a designer would call obviously different. Under each pair is a thin strip of the same two colors as that condition sees them, which is where the seam between them disappears. Every name links to its own page.
Deuteranopia
Green-blind
- RoseLime green47 apart, down to 9.1
- MagentaDeep sky blue37.7 apart, down to 0.9
- EmeraldDeep pink41.9 apart, down to 5.8
Protanopia
Red-blind
Tritanopia
Blue-blind
- BlueDark green41.1 apart, down to 1.8
- Forest greenMedium slate blue34.7 apart, down to 3.1
- MagentaTangerine36.6 apart, down to 5.6
What to do about it
Never let hue carry the meaning on its own
This is the whole of it, and the other three points are consequences. If the only difference between pass and fail is that one is green and the other is red, then for one reader in twelve there is no difference. Add a word, an icon with a distinct shape, a position, an underline. Anything that survives the color being removed.
Separate on lightness, not on hue
Every deficiency here keeps lightness. Two colors that differ in how light they are stay apart under all of them, which is why a dark red and a pale green work where a mid red and a mid green do not. It is also why the fix is often a shade adjustment rather than a different color.
Move the pairing off the red-green axis
Blue against orange is the standard alternative and it holds up under measurement: run through all eight conditions above, the closest the two ever come is 13.4, still well clear of the 10 where a pair stops being reliably separable. Red-green deficiencies leave the blue-yellow axis intact, which is exactly the axis this pairing uses.
Use the grayscale check, but know what it misses
Draining the color is the fastest test there is and it catches most of the problem. Not all of it: across the color library, 7,245 pairs stay clearly apart in grayscale and 247 of those still merge for somebody with a deficiency, because a red-green deficiency is not grayscale. It keeps the blue-yellow axis and it can move lightness around too. Call it 97 percent, and run the real simulation for the palette you are shipping.
How the simulation works, and what it cannot tell you
Color vision starts with three kinds of cone in the retina, sensitive to long, medium and short wavelengths. A color is, as far as the eye is concerned, three numbers: how strongly each cone responded. Remove one cone and every color collapses onto two numbers, and any two colors that produced the same pair of surviving responses become the same color.
Simulating that means answering the reverse question. Given the two responses a dichromat still has, which color would a person with all three cones see? There is no single answer, so the model has to choose one, and the choice is fixed by picking two colors that both kinds of viewer agree on and requiring those to come through the simulation untouched. White is one. A display primary is the other: blue for the red-green deficiencies, red for the blue-yellow one. That is the Brettel, Vienot and Mollon construction, and it is why a gray stays exactly gray here and why blue and yellow survive a deuteranope intact.
Two honest limits. The anomalous forms, which are the common ones, involve a cone that has shifted rather than one that is missing, and what happens above is the usual approximation: partway from the real color toward the dichromat's. It gets the direction right and it is not a measurement of any particular person, whose deficiency may be milder or more severe than the middle setting used here.
The second limit matters more. None of this shows anyone what anyone else sees. A person born without a green cone is not experiencing a degraded version of your palette; their color world is complete and has always been. What a simulation shows is narrower and more useful than empathy: it shows which distinctions your design was relying on that are not there to be relied on.
Common questions
- How many people are color blind?
- About 1 in 12 men and 1 in 200 women of northern European descent have some form of red-green color vision deficiency. Deuteranomaly, the mildest and by far the most common, accounts for most of that. Blue-yellow deficiency and total color blindness are much rarer and affect all sexes equally, because they are not carried on the X chromosome.
- Is this what a color blind person actually sees?
- No, and no simulation can be. It shows a person with typical color vision which distinctions disappear, which is the useful part for design work. Someone who has never had a green cone has no missing sensation to report; their world is complete to them. Treat the output as a map of what your palette stops communicating, not as a window into anyone else.
- What is the difference between protanopia and deuteranopia?
- Both are red-green deficiencies and both make red and green arrive as versions of yellow. The difference is brightness. A protanope is missing the long-wavelength cone, so red also loses most of its luminance and dark red against black can vanish entirely. A deuteranope sees red at close to normal brightness. That is why a red and green pair can be readable to one and identical to the other, which the table above shows happening.
- Which colors are safe to use together?
- Pairs that differ in lightness, and pairs that sit on the blue-yellow axis rather than the red-green one. Blue against orange is the standard recommendation and it holds up: measured here it never drops below a clear separation under any of the eight conditions, including total color blindness. Red against green is the pairing to avoid, and it is the one nearly every status palette uses.
- Is checking a design in grayscale enough?
- It is a good test and not a complete one. Draining the color leaves only lightness, so anything that survives grayscale is separated by something more robust than hue. But a red-green deficiency is not grayscale: it keeps the blue-yellow axis, and it can also shift lightness. Measured across the CSS color library, grayscale correctly clears about 97 of every 100 pairs and misses the rest.
- Do I still need to check contrast separately?
- Yes. These are different questions. Contrast asks whether text is legible against its background, and a simulation cannot answer it because a color blind reader needs the same contrast ratio everyone else does. This page asks whether two colors remain distinguishable from each other. A palette can pass one and fail the other, so run both.
- How does the simulation work?
- It uses the Brettel, Vienot and Mollon model. A color is converted into the three cone responses of the human eye, the response of the missing cone is rebuilt from the two that remain, and the result is converted back to a screen color. The reconstruction is fixed by requiring white and one display primary to come through unchanged, which is what makes grays stay gray and blue stay blue for a deuteranope.