Colour Blindness Simulator
See how two colours appear to people with colour vision deficiency and whether they remain distinguishable.
See how two colours look to people with colour vision deficiency, and whether they stay distinguishable.
How others see it
Normal vision
distinguishablethe baseline
Protanopia (no red cones)
distinguishableabout 1 in 100 men
Deuteranopia (no green cones)
distinguishableabout 1 in 100 men, the most common form
Tritanopia (no blue cones)
distinguishablerare, affects men and women equally
Achromatopsia (no colour at all)
hard to tell apartvery rare
Red and green are the classic trap: a success and error state that differ only by hue look identical to a large share of visitors. Add a shape, an icon or a label so colour is never the only signal.
Normal vision: #22c55e #ef4444 distance 418
Protanopia (no red cones) #696a77 #a5a344 distance 170
Deuteranopia (no green cones) #5f537d #afbc44 distance 261
Tritanopia (no blue cones) #2a8b8f #e64444 distance 352
Achromatopsia (no colour at all) #898989 #777777 distance 52 TOO CLOSE
A distance below about 100 means most people cannot reliably tell the two apart.About the colour blindness simulator
Around one in twelve men has some form of colour vision deficiency, and the most common form makes red and green hard to tell apart. That matters because red and green are exactly what most interfaces use for error and success.
This shows your two colours through each of the common deficiencies and flags the pairs that collapse into near identical shades, which is the moment a colour coded interface stops working for a large share of visitors.
How to use it
- 1Pick the two colours you want to compare.
- 2Look at each simulated pair.
- 3Watch for pairs marked as hard to tell apart.
- 4Adjust the colours, or add a second signal that is not colour.
Questions
How accurate is the simulation?
It uses the standard matrix approximations that accessibility tooling relies on. They are close enough to answer whether two colours remain distinguishable, which is the practical question.
Which form is most common?
Deuteranomaly and deuteranopia, affecting the green cones. Together with the red forms this accounts for the large majority of cases, and both make red and green difficult.
How do I make a colour coded interface accessible?
Never let colour be the only signal. Add an icon, a shape, a label or a pattern, so the meaning survives when the colours do not.
Is high contrast enough?
It helps a great deal, and it is why a dark red against a light green is safer than two colours of similar lightness. But a second non colour signal is still the reliable answer.