Color Blindness Simulator
Preview how your image looks to users with 8 color-vision deficiencies.
Color Blindness Simulator
How was your experience with this tool?
Found a bug? Missing a feature? Tell us — it takes 10 seconds.
How to use Color Blindness Simulator
Follow these steps — everything happens instantly in your browser.
- 1
Step 1. Drop an image onto the zone.
- 2
Step 2. Pick a color vision deficiency type (deuteranopia is the most common).
- 3
Step 3. Click “Download simulated image” to save the result.
Color Blindness Simulator: Test Your Designs for 8 CVD Types
Why this matters
About 8 percent of men and 0.5 percent women worldwide have some form of color vision deficiency, most commonly red-green confusion (deuteranopia and protanopia). If your design relies on red and green to convey status — error versus success, occupied versus available, urgent versus safe — a significant portion of your audience cannot distinguish those states. The fix is not to eliminate color but to ensure that information is also conveyed through shape, pattern, label, or luminance contrast. The first step is seeing the problem, and that is what this simulator provides.
Drop any image and select from eight simulation modes covering the full spectrum of color vision deficiency: protanopia, deuteranopia, tritanopia, and achromatopsia (total color blindness), plus their weaker variants protanomaly, deuteranomaly, tritanomaly, and achromatomaly. Each mode applies a standard Viénot-style 3-by-3 RGB transformation matrix that approximates how a person with that condition perceives the image. You can then download the simulated version for side-by-side comparison, documentation, or stakeholder review.
The eight simulation types
| Type | Deficiency | Prevalence |
| --- | --- | --- |
| Protanopia | No red cones | 1% of males |
| Deuteranopia | No green cones | 1% of males |
| Tritanopia | No blue cones | Rare |
| Achromatopsia | No color vision at all | Extremely rare |
| Protanomaly | Weak red cones | 1% of males |
| Deuteranomaly | Weak green cones | 5% of males |
| Tritanomaly | Weak blue cones | Rare |
| Achromatomaly | Partial color blindness | Extremely rare |
How to use it
Drop an image file onto the upload zone.
Select a color vision deficiency type — deuteranopia is the most common and a good default for first testing.
Review the simulated image to check whether color-dependent information is still distinguishable.
Click Download simulated image to save the result for comparison or documentation.
Testing your result
Create a simple test image with red, green, and blue circles on a white background, then run it through deuteranopia and protanopia simulation. The red and green circles should appear nearly identical in the simulated output, confirming the matrix is working correctly. Test the same image with tritanopia and verify that blue and yellow become harder to distinguish while red and green remain separable. Finally, simulate achromatopsia and confirm the image appears in grayscale. These checks validate each transformation independently.
Common mistakes
Testing only deuteranopia and stopping — protanopia produces a different (often more severe) red weakness that can reveal distinct problems.
Assuming the simulation is a perfect model — it is a design-tool approximation, not a clinical representation of any individual's perception.
Relying solely on this tool instead of also checking text contrast ratios with a dedicated contrast checker.
Edge cases and limitations
The Viénot matrices are the de-facto standard for design testing, but they model cone deficiency at a population level, not an individual's exact perception. Some people with mild anomalies may see more color than the simulation suggests, while others with additional conditions (cataracts, macular degeneration) may see less. The tool processes images entirely in your browser using Canvas pixel manipulation, so no image data is uploaded. Very large images may be slow depending on your device's available memory.
Real-world use cases
A UI designer checking whether a dashboard's red/green status indicators remain distinguishable under deuteranopia simulation.
A cartographer verifying that a map's color-coded legend works for readers with red-green color blindness.
An educator creating accessible instructional materials where color is used to differentiate chart segments or diagram categories.
Frequently asked questions
Q: Which simulation matrices are used?
A: Standard Viénot-style 3x3 RGB transforms for each deficiency. They approximate how a person with that condition perceives colors — not a perfect model but the de-facto reference for design testing.
Q: Why should designers care?
A: About 8% of men and 0.5% of women have some form of color vision deficiency. If your design relies solely on red/green contrast, key information may be invisible to them.
Q: Is this a medical simulation?
A: No. It is a design-tool approximation. For clinical color-vision testing, see an optometrist.
Q: Is my image uploaded?
A: No. Simulation runs entirely in your browser.
Q: Should I test all eight types?
A: At minimum, test deuteranopia and protanopia (the two most common). Add tritanopia if your design uses blue-yellow distinctions, and achromatopsia for maximum accessibility assurance.
Start using it now
Test your images for color vision deficiency with the Color Blindness Simulator. Pair it with the Contrast Checker to verify text readability. Explore color combinations that work for everyone with the Color Palette Generator, and extract accessible palettes from existing images with Color Palette from Image. Apply final visual adjustments using Image Filters.
Want the extended step-by-step tutorial? Read it here.
Why use this tool
Private by design
All processing happens locally in your browser. Open DevTools → Network and you'll see zero file uploads. Ever.
Instant
No upload wait, no queue, no server round-trip. Results appear the moment you drop a file.
Free & unlimited
No accounts, no watermarks, no daily caps. Use it as many times as you like, forever.
Works everywhere
Desktop, tablet or phone — every tool is responsive and installable as a PWA for offline use.
Frequently asked questions
Everything you might want to know about color blindness simulator.
❤️ This tool is free — forever.
Sharing it helps more people discover it, and ad revenue from visitors is what keeps it free. No accounts, no catch.
Contrast Checker
Test foreground/background pairs against WCAG AA & AAA — live.
Image Filters
Apply grayscale, sepia, blur, brightness & more with live preview.
Color Palette Generator
Pick a base color and instantly generate a 5-stop harmonious palette.
Color Palette from Image
Extract dominant colors from any image — copy HEX or export CSS.