Color Blindness Simulator

Why color blindness simulation matters for designers and developers

Approximately 1 in 12 men and 1 in 200 women experience some form of color vision deficiency. For a product with millions of users, that means a significant portion of your audience may not perceive your interface the way you intend. Error states styled only in red, success indicators in green, or navigation tabs distinguished purely by hue can become invisible or ambiguous barriers for colorblind users.

Simulation tools bridge the gap between design intent and user experience. Rather than relying on abstract rules ("don't use red and green together"), you can load your actual screenshot, dashboard, or brand palette and directly observe which elements lose their intended meaning under deuteranopia or tritanopia. This makes accessibility concerns concrete and actionable for stakeholders, developers, and QA engineers alike.

Color blindness simulation works alongside — not instead of — contrast checking. The Contrast Checker measures luminance difference, which determines legibility for low-vision users and passes WCAG criteria. Simulation reveals a different layer: whether color alone is carrying meaning that disappears for colorblind users. Best practice is to use both: verify contrast ratios with the Contrast Checker, then load the same design into this simulator to confirm that distinguishable colors remain distinguishable across all eight deficiency types.

When building color palettes for data visualizations, charts, or maps, simulation is especially critical. Many default chart libraries use red/green pairs that become identical under deuteranopia. The Color Palette Generator can help you build harmonious color sets — then use this simulator to verify the palette remains distinct for colorblind viewers before committing it to production.

How to use this tool

1. Select a simulation type. The eight buttons cover the full spectrum of common color vision deficiencies. Deuteranomaly (green-weak) is the most common type affecting the general population, so it is a sensible starting point. Achromatopsia (complete monochromacy) is the most extreme and will render everything in grayscale.
2. Upload your image or use the sample. Drag any PNG, JPEG, WebP, or GIF into the drop zone. Images up to 20 MB and up to 1,600 px wide are supported; larger images are automatically scaled down to keep processing fast. No account required.
3. Compare side by side. The original image appears on the left, the simulated view on the right. Look for UI elements — buttons, error messages, legend labels, charts — that were visually distinct in the original but appear indistinguishable in the simulation.
4. Fix problem areas. If two colors merge in the simulation, add a secondary differentiator: pattern, shape, icon, label, or a texture overlay. Avoid relying on hue alone to convey critical state, category, or action.
5. Check the palette mode. Paste a list of hex values from your design system or brand guidelines to preview how each color shifts under the selected deficiency. This is faster than uploading a full screenshot when you are auditing a token set.

Understanding the eight simulation types

• Protanopia — L-cone (long-wavelength / red-sensitive) is absent. Reds appear dark brownish; reds and greens are confused; luminance of red light is much reduced. Affects ~1% of males.
• Protanomaly — L-cone is present but shifted toward the M-cone response. Similar to protanopia but milder. Reds appear less saturated and may be confused with orange or green. Affects ~1% of males.
• Deuteranopia — M-cone (medium-wavelength / green-sensitive) is absent. Reds and greens are indistinguishable and shifted toward yellow-brown. The most discussed dichromacy type. Affects ~1% of males.
• Deuteranomaly — M-cone is shifted toward L-cone sensitivity. Greens appear more yellow or red. The most common form of color blindness overall, affecting ~5% of males.
• Tritanopia — S-cone (short-wavelength / blue-sensitive) is absent. Blues and greens merge; yellows and pinks are confused with grays. Rare, affecting <0.1% of males — and unlike red-green types, it is not sex-linked.
• Tritanomaly — S-cone is weakened. Blues and greens are harder to distinguish. Rarer still than tritanopia.
• Achromatopsia — No functioning cone cells. Complete color blindness; vision is entirely in shades of gray derived from rod-cell luminance (ITU-R BT.601 coefficients: 29.9% R, 58.7% G, 11.4% B). Also known as rod monochromacy.
• Achromatomaly — Blue-cone monochromacy. Partial color vision; cones function weakly. Simulated as a 50% blend toward the achromatopsia matrix. Very rare.

Frequently asked questions

What are protanopia, deuteranopia, and tritanopia?

These are the three main types of dichromacy — color vision deficiencies where one class of cone photoreceptor is absent. Protanopia (red-blind) affects L-cones, deuteranopia (green-blind) affects M-cones, and tritanopia (blue-blind) affects S-cones. The anomaly variants (protanomaly, deuteranomaly, tritanomaly) have the corresponding cone type present but shifted or weakened rather than fully absent, causing reduced — rather than eliminated — sensitivity to that color range.

How common is color blindness?

Color blindness affects roughly 8% of males and 0.5% of females of Northern European descent — about 300 million people worldwide. Deuteranomaly (green-weak) is the most common type, accounting for around 5% of males. Achromatopsia (complete monochromacy) is rare, affecting approximately 1 in 30,000 people globally.

Why is contrast ratio alone not enough for accessibility?

WCAG contrast ratios measure luminance difference between two colors, but they do not account for the hue shifts that color blindness causes. A red/green combination can pass WCAG AA contrast requirements for people with normal vision yet be almost indistinguishable to someone with deuteranopia. The Color Blindness Simulator reveals these hue-based distinctions that a contrast checker alone cannot expose. Use both tools together for thorough accessibility review.

Is my image uploaded to a server?

No. Everything runs entirely in your browser using the HTML Canvas API. Your image data is never sent to any server, logged, or stored anywhere. You can safely simulate confidential or proprietary assets without any privacy concern.

How accurate are the simulations?

The tool uses established 3×3 RGB transformation matrices derived from the Brettel et al. (1997) research paper, which is the most widely cited model for dichromacy simulation. Anomalous trichromacy types (the "anomaly" variants) use a 50% blend between the identity matrix and the corresponding dichromacy matrix, representing a typical mid-severity case. Real-world perception varies between individuals, so the simulation is an approximation — but it faithfully represents the broad hue shifts that affect that type of color vision.