Color blindness simulator

Design that still works when colors are missing

Around one in twelve men and a much smaller share of women have some form of color vision deficiency, most often trouble telling red from green. If a chart uses color as the only way to tell two lines apart, or a button uses red and green to mean stop and go with no other signal, a meaningful share of your audience cannot read it the way you intended. Simulating color blindness on your own design is the fastest way to catch this before it ships.

The four kinds simulated

• Protanopia: no red-sensing cones. Reds look darker and can be confused with green or brown.
• Deuteranopia: no green-sensing cones, the most common form. Reds and greens are both hard to tell apart.
• Tritanopia: no blue-sensing cones, rare. Blues and yellows are confused.
• Achromatopsia: total color blindness, very rare, everything appears in shades of gray. It is a useful stress test even beyond color blindness, since it also shows how well a design works when printed in black and white.

What to look for

Check that any information carried only by color, such as a status badge, a chart legend or a form validation error, is still understandable in each simulated version, usually with the help of a shape, an icon, a label or a pattern in addition to color. Red and green together are the pairing that causes the most trouble in practice, since red-green deficiencies are far more common than blue-yellow ones.

Limits

This uses a standard mathematical approximation of how colors shift for full color blindness, the same approach used by most simulators; it does not capture partial deficiencies, which are more common than the total forms shown here, and it cannot replace testing with real users when that is possible. The image is processed entirely in your browser and is never uploaded. To check specific colors against WCAG contrast requirements, use the contrast checker.