Color Blindness Simulator
See your designs, screenshots, and graphics through the eyes of users with color vision deficiency. Upload any image to generate instant, scientifically-accurate simulations — entirely in your browser.
Approximately 300 million people worldwide have some form of color blindness. Roughly 1 in 12 men are affected. This tool helps you design for all of them.
Color Blindness Simulator
Upload any image to see how it appears with different types of color vision deficiency.
Drop an image here
or click to browse — PNG, JPG, GIF, WebP supported
The 7 Types of Color Vision Deficiency
Color blindness is not a single condition — it encompasses a spectrum of deficiencies affecting different cone cells in the eye. Understanding each type helps you design more inclusively.
Deuteranomaly
~5% of men, 0.4% of womenReduced sensitivity to green light. Most common form of color blindness.
Affected colors: Green, yellow, red appear similar
Protanomaly
~1% of men, 0.01% of womenReduced sensitivity to red light. Reds appear darker and less saturated.
Affected colors: Red appears darker, green-red confusion
Deuteranopia
~1% of men, 0.01% of womenComplete absence of green-sensitive cones (M-cones).
Affected colors: Cannot distinguish red from green
Protanopia
~1% of men, 0.01% of womenComplete absence of red-sensitive cones (L-cones).
Affected colors: Cannot distinguish red from green; red appears black
Tritanopia
~0.003% of all peopleComplete absence of blue-sensitive cones (S-cones). Very rare.
Affected colors: Cannot distinguish blue from green, yellow from violet
Achromatopsia
~0.003% of all peopleComplete color blindness. Only brightness differences are perceived.
Affected colors: All colors appear as shades of grey
Who Is Affected?
6 Design Rules for Color Accessible Interfaces
Never rely on color alone
Always pair color with a second indicator — a label, icon, pattern, or shape. A red/green status indicator should also use "Error" / "Success" text or distinct icons.
Test with sufficient contrast
Many contrast failures are especially harmful for color blind users. Run your palette through the contrast checker — a minimum 4.5:1 ratio helps everyone.
Avoid red-green combinations
Red-green confusion affects roughly 8% of men. Use blue-orange or blue-red instead for charts, alerts, and status indicators.
Use patterns and textures in charts
Data visualizations that rely on color alone exclude many users. Add stripe patterns, dots, or cross-hatching so chart areas are distinguishable without color.
Provide text labels on color-coded maps
Heat maps and choropleth maps are notoriously inaccessible. Always include numerical labels or a textual description of the information.
Test your UI with a grayscale check
Convert your design to grayscale. If you can still understand the interface, you're on the right track. If important information disappears, fix it.
How the Simulation Works
This simulator uses the Machado et al. (2009) physiologically-based model — the same algorithm used by Chrome DevTools, Figma, and other professional design tools.
- 1Your image is drawn onto an off-screen HTML Canvas element entirely within your browser.
- 2Each pixel's sRGB values are converted to linearized light values (gamma decoding).
- 3A 3×3 matrix transforms the linear RGB triplet to simulate missing or weakened cone responses.
- 4The result is gamma re-encoded and written back to the canvas for display.
- 5For anomalous trichromacy (protanomaly, deuteranomaly), the matrix is interpolated at 60% severity to simulate weakened (not absent) cone response.
Privacy: No image data leaves your device. All processing happens locally in your browser via the Canvas API.
Color Blindness and WCAG Compliance
The Web Content Accessibility Guidelines address color vision deficiency in two key criteria:
WCAG 1.4.1 — Use of Color (Level A)
Color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. This is the most directly relevant criterion for color blind users.
WCAG 1.4.3 — Contrast (Minimum) (Level AA)
Text and images of text must have a contrast ratio of at least 4.5:1. Sufficient contrast helps color blind users distinguish content even when hue differences are imperceptible.
WCAG 1.4.11 — Non-text Contrast (Level AA)
UI components and graphical objects must have a 3:1 contrast ratio. This ensures form fields, buttons, and icons are visible regardless of color perception.
Frequently Asked Questions
Go Further: Run a Full Accessibility Audit
Color vision is just one dimension of accessibility. Use AChecker to scan your website for the full range of WCAG 2.2 issues — keyboard navigation, screen reader compatibility, semantic HTML, and more.