Color Blindness Simulator

Designing for color-vision deficiency

The safest fixes don't rely on hue alone: pair color with text, icons, patterns or position; keep a strong lightness contrast between adjacent colors; and avoid red/green as the only difference between two states. Deuteranomaly is by far the most common form, so if a design survives that column it usually survives the rest.

How to use the color blindness simulator

Switch between A color and An image at the top of the tool. In color mode, pick any hex value and eight cards render it instantly under every simulated condition, each labeled and with its own simulated hex code. In image mode, drop in a screenshot, mockup or photo and the tool renders a side-by-side original-versus-simulated comparison; click any of the eight thumbnails underneath to switch which condition the right-hand panel shows. Nothing you upload leaves your browser — the simulation runs entirely client-side.

The eight types of color blindness this tool simulates

Color blindness comes in two broad flavors: complete loss of one cone type (-anopia) and reduced sensitivity in one cone type (-anomaly). Protanopia and protanomaly affect red-sensing cones; deuteranopia and deuteranomaly affect green-sensing cones and together are the most common form, present in roughly 1 in 20 men. Tritanopia and tritanomaly, affecting blue-sensing cones, are much rarer and unrelated to sex. Achromatopsia is complete color blindness — vision reduced to a single grayscale channel — and achromatomaly is a milder version where most hues collapse toward gray. This simulator applies published transformation matrices (Machado, Oliveira & Fernandes, 2009) in linear RGB, the same approach used by professional accessibility auditing tools.

Color blindness simulator use cases

• Accessibility QA — check a finished screen or mockup before it ships, not just individual color pairs.
• Chart and data-viz design — confirm category colors stay distinguishable under deuteranomaly, the most common condition.
• Brand and logo review — see whether a logo still reads clearly when its signature colors shift.
• Design system audits — run key components through all eight conditions in one pass.

Color blindness is only half of the accessibility picture — pair this tool with the WCAG contrast checker to confirm text stays readable regardless of color vision, and lean on the color picker's Vision tab to preview a single color's simulated variants while you're still choosing it.

How common is color blindness?

Roughly 1 in 12 men (about 8%) and 1 in 200 women have some form of color-vision deficiency — a large enough share that most products have color-blind users whether the team has heard from them or not. The imbalance between men and women is because the most common types (protan and deutan, both red-green) are carried on the X chromosome. Red-green deficiencies account for the overwhelming majority of cases; blue-yellow (tritan) deficiency is rare and affects both sexes equally, and complete color blindness (achromatopsia) is rarer still, around 1 in 30,000. Because deutan conditions are the single biggest group, checking a design against Deuteranomaly first catches the most real-world problems for the least effort.

Designing with redundant cues

Simulation tells you where a design breaks; the fix is almost always adding a second signal so color isn't doing the job alone. Pair a red error state with an icon and a text label. Distinguish chart lines by dash pattern or direct labels, not just hue. Show a selected tab with an underline or a weight change, not only a color shift. Use position and grouping so a legend isn't the only way to tell two series apart. None of this makes the design worse for people with typical color vision — a labeled, iconed error message is clearer for everyone. Run the finished screen back through this simulator and through the contrast checker to confirm both the color-blind and low-contrast cases hold up.

Color blindness simulator FAQ