Color Blindness Simulator: Designing for Everyone
About 8% of men and 0.5% of women have some form of color vision deficiency. Simulating how your design looks to them is essential for accessible interfaces β and shockingly easy to overlook without a tool.
The most common form is red-green deficiency (deuteranomaly and protanomaly). Red and green look similar; certain hue combinations become indistinguishable. A button that's 'green for go, red for stop' fails completely for users with these conditions.
Other forms: blue-yellow deficiency (rare), monochromacy (very rare). The simulator transforms images to show what each form would see, helping designers spot accessibility issues before launch.
Design rules that survive color blindness
- β’Don't rely on color alone. Add icons, text labels, or shape differences.
- β’Avoid red-on-green text or graphics β invisible to ~5% of users
- β’Test with the simulator at design time, not after launch
- β’Use blue/orange instead of red/green for status indicators when possible
- β’Maintain at least 4.5:1 contrast (which also helps low-vision users)
Extended FAQ
Are color blindness 'glasses' real?
EnChroma-style filters can enhance contrast between red and green for people with mild deficiency, but they're not a cure. Plenty of users with color vision deficiency don't use them at all.
Are my images stored?
No β runs entirely in your browser.