Color Blindness Simulator
Preview how images appear to people with various types of color vision deficiencies — 8 simulation modes, real-time canvas rendering
Drag & drop image here
Supports JPEG, PNG, WebP, GIF
Understanding Color Blindness
What Is Color Blindness?
Color blindness (color vision deficiency) occurs when the eye's cone cells are absent or malfunction, reducing the ability to distinguish certain colors. It is usually inherited and affects around 8% of men and 0.5% of women worldwide.
Types of Deficiency
The three main categories are Protan (red deficiency), Deutan (green deficiency), and Tritan (blue deficiency). Each comes in a full (anopia) and partial (anomaly) variant. Achromatopsia is full monochromacy.
Prevalence
Deuteranomaly is by far the most common form (~5% of males). Protanopia and deuteranopia each affect about 1% of males. Tritanopia and achromatopsia are rare, affecting fewer than 1 in 10,000 people. The condition is rare in females due to X-linked inheritance.
Design Considerations
Never rely on color alone to convey information. Use patterns, icons, and labels alongside color. Ensure sufficient luminance contrast between foreground and background. Test your designs in multiple simulation modes before publishing.
Design for Everyone
Use Color + Shape
Pair color cues with icons, patterns, or text labels so color-blind users still understand your UI without relying on hue alone.
Avoid Red-Green Combos
Red and green are the most commonly confused pair. Use blue-orange or purple-yellow palettes for data visualisations and status indicators.
Maintain Luminance Contrast
Even when hues merge, high luminance contrast remains visible. Follow WCAG AA (4.5:1 for text, 3:1 for UI components) as a minimum baseline.
Use Colorblind-Safe Palettes
Palettes like Okabe-Ito, IBM Design, and WCAG-friendly sets are designed to remain distinguishable across the most common deficiency types.
Test Early, Test Often
Run simulations during the design phase — not just before launch. Browser extensions and tools like this simulator let you check any screenshot instantly.
Provide Text Alternatives
Charts and graphs should always have data labels, alt text, or an accessible data table. Screen reader users and color-blind users both benefit from descriptive content.
What is Color Blindness Simulator?
A color blindness simulator is an accessibility tool that transforms an uploaded image to show how it appears to people with different types of color vision deficiency. Approximately 1 in 12 men and 1 in 200 women have some form of color blindness, making accessible color design a critical consideration for UI designers, graphic designers, data visualisation creators, and anyone publishing visual content.
Color vision deficiency comes in many forms. The most common types are red-green deficiencies: deuteranopia (missing green cone cells), protanopia (missing red cone cells), and their milder forms deuteranomaly and protanomaly. Blue-yellow deficiency (tritanopia and tritanomaly) is rarer. Achromatopsia (complete color blindness) and monochromacy represent the most severe end of the spectrum.
This tool simulates all eight major types, applying scientifically validated color transformation matrices to your image in real time. You can view results in three modes: a side-by-side comparison with the original, a multi-panel grid showing all simulations at once, and a single full-size view for detailed inspection. By seeing your design through the eyes of users with color vision deficiency, you can identify problematic color combinations — such as red-green status indicators — and choose more accessible alternatives before publishing.
How to Use Color Blindness Simulator
- Upload your image
Drag and drop or click to upload any image file. JPEG, PNG, and WebP are all supported.
- Select a color blindness type
Choose from eight simulation types including deuteranopia, protanopia, tritanopia, achromatopsia, and more.
- Compare the views
Switch between side-by-side, grid, and single view modes to inspect how the image looks under each condition.
- Download the simulation
Download any simulated image to share with your team or include in an accessibility review report.
Key Benefits
Covers all major color vision deficiency types including common red-green and rarer blue-yellow variants.
Compare side-by-side, view a full grid, or inspect a single simulation — choose the layout that suits your workflow.
Your images are processed entirely in the browser using canvas transformations. Nothing is uploaded to a server.
Identify color combinations that fail for color-blind users before publishing, making your content more inclusive.
Frequently Asked Questions
The simulations use established color transformation matrices derived from vision science research, providing a close approximation. They are accurate enough for design review but not a clinical diagnostic tool.
Deuteranomaly (reduced green sensitivity) is the most common, affecting about 5% of males. Protanomaly and deuteranopia are also frequent. Blue-yellow deficiencies are much rarer.
Red and green appear similar or identical to people with protanopia and deuteranopia. Avoid using red and green alone to convey meaning — add labels, patterns, or icons as additional indicators.
Yes. Take a screenshot of your interface and upload it to see how the entire UI appears under each simulation type. This is a quick way to audit color usage across your design.