Color Blindness Simulator

About this tool

The Color Blindness Simulator applies color vision deficiency (CVD) simulation matrices to input colors, showing how they appear to people with various types of color blindness. Supported deficiency types include Deuteranopia (red-green, most common, ~5% of males), Protanopia (red-green, red perception reduced), Tritanopia (blue-yellow, rare), Achromatopsia (full color blindness, grayscale), and the partial variants Deuteranomaly and Protanomaly. Enter a palette of hex colors or upload a UI screenshot to see the simulated view. This tool is essential for inclusive design, helping designers verify that color alone is not used to convey information.

Why use it

• Simulates 6 types of color vision deficiency including full achromatopsia in one tool.

• Shows original and simulated colors side by side for direct, undistorted comparison.

• Helps ensure designs meet WCAG guideline 1.4.1 (Use of Color).

• Instantly switches between deficiency types for quick coverage.

How to use

1. Enter hex colors or paste a comma-separated color palette into the input.
2. Select the color vision deficiency type from the dropdown (deuteranopia, protanopia, tritanopia, etc.).
3. See the original and simulated colors side by side in the comparison panel.
4. Toggle between deficiency types to check all common variants (a CVD-friendly palette must work for all of them).

When it helps

• Verifying that charts and graphs convey information without relying solely on color (WCAG 1.4.1).
• Testing UI state indicators (error/success/warning states) are distinguishable by CVD users.
• Reviewing a brand palette for accessibility before finalizing it.
• Checking maps or data visualizations for color-independent readability.

Examples

#22c55e (success), #ef4444 (error)

Both render as muddy yellow-brown tones — visually indistinguishable. Add icons (check, X) or text labels.

#2563eb (blue), #f97316 (orange)

Blue stays blue; orange shifts toward yellow. Pair remains clearly distinct — safe for status colors.

#f5c842, #d4a82a, #4ade80

All three collapse to similar mid-grays — pure brand recognition lost. Add lightness contrast or shape cues.

#3b82f6 (blue water), #fbbf24 (yellow land)

Both desaturate toward pinkish gray and look near-identical. Use texture or labels for map legends.

Tips

• Always test deuteranopia first — it's the most common form, affecting ~5% of all males.
• Pair color with redundant cues: icons, labels, patterns, or position. WCAG 1.4.1 demands this regardless of CVD severity.
• Avoid red+green pairings for status (success/error). Use red+blue or red+gray instead, or add iconography.
• Aim for color pairs that remain distinguishable in achromatopsia (grayscale) — that guarantees CVD safety in all simulations.
• Tritanopia (blue-yellow) is rare but should still be tested, especially for finance and medical UIs where blue is heavy.
• Use distinct lightness values between paired colors — luminance contrast survives all CVD simulations.

Frequently Asked Questions

Glossary

Color vision deficiency (CVD)

Umbrella term for any inherited or acquired condition that alters typical color perception. Affects roughly 8% of males and 0.5% of females.

Deuteranopia

The most common form of red-green color blindness — green-sensitive cones (M-cones) are absent. Reds, greens, and oranges look similar.

Protanopia

Red-green color blindness in which the long-wavelength (red) cones are absent. Reds appear darker than usual and shift toward gray.

Tritanopia

Rare blue-yellow color blindness — short-wavelength (blue) cones are absent. Affects roughly 0.01% of the population.

Achromatopsia

Total color blindness; the world is perceived in shades of gray. Very rare (1 in 33,000) but the strictest test for color-redundant design.

Anomaly vs anopia

An '-anomaly' suffix means reduced sensitivity (deuteranomaly, protanomaly, tritanomaly). An '-anopia' suffix means complete absence of one cone type — the more severe form.

WCAG 1.4.1 — Use of Color

Level A success criterion: 'Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.'

Brettel-Viénot-Mollon model

1997 simulation algorithm that computes how a CVD viewer would perceive a given sRGB color. Standard in accessibility tooling (Chrome DevTools, Sim Daltonism).