Colors & design
Color Blindness Simulator
See your visuals through the eyes of 8% of your visitors.
About 8% of men and 0.5% of women perceive colors differently: a red-and-green chart, a button distinguished only by its color, or a color-coded map can become unreadable. This tool shows you exactly what they see. Drop an image — a mockup, logo, chart or screenshot — and it renders in four versions side by side: the original, then simulations of protanopia and deuteranopia (red-green confusion, the most common forms) and tritanopia (blue-yellow confusion, rarer). The simulations use the standard scientific transformation matrices. Problematic color combinations jump out at a glance, and no image ever leaves your browser.
How does it work?
- Drop an image: mockup, chart, logo, screenshot…
- The four versions render side by side instantly.
- Compare the original against the three simulations.
- Spot elements that are only distinguishable by color.
Frequently asked questions
Which types of color blindness are simulated?
The three dichromacies: protanopia (missing red cones) and deuteranopia (missing green cones), which confuse reds and greens, and tritanopia (missing blue cones), which confuses blues and yellows. Together they cover the vast majority of cases.
What should I do if my visual becomes unreadable?
Never rely on color alone: add labels, patterns, icons or lightness differences. A red and a green with very different lightness stay distinguishable even when the hues are confused.
How does this relate to WCAG accessibility?
WCAG criterion 1.4.1 requires that color never be the only carrier of information, and 1.4.3 sets minimum contrast ratios. This simulator helps you check the first; our contrast checker covers the second.
How accurate is the simulation?
It applies the standard transformation matrices from vision research — the same method professional tools use. Individual perception varies, but the at-risk color combinations are identified reliably.