Your Red Button Looks Brown to 300 Million People
Here’s a stat that should change how you design: about 8% of men and 0.5% of women have some form of color vision deficiency. That’s roughly 300 million people worldwide. And most of them experience red-green confusion, which means your bright red error state and your green success state? They might look almost identical.
Pick a color and this tool shows you how it appears under four types of color blindness, Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (total color blindness). The original and all four simulations sit side by side.
The Eye-Opening Part
Try this: enter a bright red (#FF0000) and note the Deuteranopia simulation. Then enter a bright green (#00FF00) and check that same simulation. They both shift to a similar brownish-yellow. That’s why traffic lights don’t rely on color alone, position (top vs. bottom) is the actual indicator. Your UI should work the same way.
The simulations use established linear RGB transformation matrices from peer-reviewed research. They won’t perfectly replicate subjective experience (nobody’s simulation can), but they’re the same approximations used in professional accessibility tools. Good enough to catch problems before they ship.
What to Actually Test
Status indicators. Your form validation shows red for errors and green for success. Under Deuteranopia, those might become indistinguishable. Add an icon, a checkmark for success, an X for error, and the problem disappears regardless of color vision.
Charts and graphs. If your line chart uses red, green, and orange series, they could all merge into similar muddy tones. Swap to blue, orange, and dark gray, and you’ll survive every simulation type.
Game interfaces. Team colors, health bars, interactive feedback, if color is the only differentiator, color-blind players are at a genuine disadvantage.
Brand palettes. Run your brand colors through all four simulations before launch. Finding out your primary and secondary colors are indistinguishable under Protanopia is better discovered now than after the rebrand goes live.
The Rule That Fixes Everything
WCAG 2.1 Success Criterion 1.4.1 puts it simply: don’t use color as the only way to convey information. Pair it with icons, patterns, text labels, or spatial position. Blue and orange are the safest high-contrast pair across all CVD types, they survive every simulation well.
Use the Contrast Checker alongside this to verify WCAG contrast ratios. The Color Picker helps find alternative colors when your current choices fail. Simulations run in your browser, nothing leaves your device.
The Four Types, Briefly
Deuteranopia (green-blind) is the most common, about 6% of males. Red-green distinction is lost. Protanopia (red-blind) affects about 1% of males. Also loses red-green distinction, but reds appear darker. Tritanopia (blue-blind) is rare, under 0.01%. Blue-yellow distinction is reduced. Achromatopsia (total color blindness) is extremely rare, everything becomes shades of gray.