Color Blindness Simulator

What is color blindness?

Color blindness, more precisely called color vision deficiency, means the cone cells in the eye respond to light differently than usual. Instead of seeing the full range of color, certain hues look muted, shift toward other colors, or become hard to tell apart. It affects roughly 1 in 12 men and 1 in 200 women, so most teams ship designs to a meaningful audience who do not see color the way the designer does.

There are three broad families: red-green deficiencies (by far the most common), blue-yellow deficiencies, and complete color blindness where little or no color is perceived at all. This tool simulates all eight named types so you can see the difference for yourself.

What do the different types of color blindness look like?

Each type comes from a specific cone being missing or weakened. Anomalous types (the ones ending in -anomaly) have a working but shifted cone, so their effect is milder than the matching dichromat type.

• Deuteranomaly is the most common type. Greens and reds drift toward a muddier, more similar middle, so red and green can be tricky but not impossible to separate.
• Deuteranopia and protanopia are the classic red-green forms. Reds, greens, oranges and browns collapse toward yellow and beige, and a red traffic light can look almost the same brightness as green.
• Protanomaly dims reds specifically, so red text or warnings lose their punch and can fade against dark backgrounds.
• Tritanopia and tritanomaly affect the blue-yellow axis. Blues shift toward green and yellows can wash out toward pink or grey.
• Achromatopsia removes color entirely, leaving a grayscale world, while achromatomaly keeps only a faint, washed-out hint of color.

How to use this color blindness simulator

Pick any input source above and all eight simulations appear together, labeled by name and by family so you never have to guess which is which:

• Upload an image or drag one in. Photos, screenshots, charts, maps and UI mockups all work well.
• Try a sample if you just want to explore. The samples include a color wheel, a spectrum, a set of easily confused colors, and a red-green chart.
• Paste a palette of hex or rgb values to see how each brand or UI color shifts for every type.
• Press and hold any tile to flash back to the original, so you can spot exactly what changes. Each tile downloads as a PNG with one click.

How accurate is a color blindness simulator?

Simulations like this one use published color science (the Machado, Oliveira and Fernandes 2009 model) to approximate how an average person with each deficiency perceives color. They are excellent for design and accessibility checks: if your chart, map or interface still reads clearly across every type here, it will work for the large majority of color blind users. They are not a substitute for testing with real people, and they cannot diagnose anyone, because real color vision varies from person to person.

Designing for color blind users

The simulator is most useful as a quick gut check while you work. A few habits make designs robust:

• Never rely on color alone. Add labels, icons, patterns or text so meaning survives in grayscale.
• Avoid red-on-green and green-on-red pairings for critical states like pass and fail.
• Lean on lightness contrast, not just hue. Two colors that differ in brightness stay distinct for almost everyone.
• Check your charts and status indicators in the deuteranomaly and deuteranopia views, since those cover the largest group.