Color Blindness Simulator
Enter a color to see how it appears under four common types of color vision deficiency.
Check Color Contrast
After simulating, verify that your colors meet accessibility standards.
Open Contrast Checker →What Is a Color Blindness Simulator?
A color blindness simulator applies mathematical transformations to a chosen color to approximate how it would appear to someone with a color vision deficiency (CVD). About 8% of men and 0.5% of women worldwide have some form of color blindness. The most common types are protanopia (reduced sensitivity to red light), deuteranopia (reduced sensitivity to green light), tritanopia (reduced sensitivity to blue light), and achromatopsia (complete lack of color vision).
This tool lets you pick any color — via a native color picker or by typing a hex code — and see five swatches side by side: the original color and four simulated versions. Each swatch is labeled with the condition name and a short description (e.g., "Red-blind"). The simulation uses a simple matrix-based transformation that converts the RGB values into the perceived color for each deficiency type.
Using a color blindness simulator during the design process helps you build more inclusive interfaces. For example, a green "success" indicator and a red "error" indicator may look nearly identical to someone with deuteranopia. By catching these issues early, you can choose color combinations that remain distinguishable for all users, or add redundant cues like icons and text labels alongside color.
Frequently Asked Questions
What types of color blindness are simulated?
The tool simulates four types: protanopia (red-blind, difficulty perceiving red light), deuteranopia (green-blind, difficulty perceiving green light), tritanopia (blue-blind, difficulty perceiving blue light), and achromatopsia (complete monochrome vision, no color perception at all).
How accurate is the simulation?
This simulation uses standard mathematical models (linear transformation matrices applied to the RGB color space) to approximate how a color appears under each deficiency type. These are reasonable approximations used widely in accessibility tools, but individual perception varies. The simulation is a design aid, not a clinical diagnostic tool.
How can I use this to improve accessibility?
Test your brand colors, UI elements, and data visualizations by entering them into the simulator. If two colors that carry meaning (e.g., red for error, green for success) look nearly identical in a simulated view, add additional cues such as icons, patterns, or text labels. Also check contrast ratios with our Contrast Checker to ensure readability.
Does the simulator affect the contrast checker link?
Yes — after identifying colors that may be hard to distinguish under a deficiency type, click the "Open Contrast Checker" link to test whether those colors meet WCAG AA or AAA contrast ratios for text and UI components.