Color-Blindness Image Simulator
Preview how your designs, screenshots, and visual assets appear to individuals with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia. Uses standard physiological color transformation matrices offline.
Click to upload image or drag & drop
Supports PNG, JPG, WebP, SVG, BMP
How to Use Color-Blindness Image Simulator
Upload Image or Mockup
Select any design, UI screenshot, logo, or photo (PNG, JPG, WebP, SVG).
Select Vision Deficiency
Choose Protanopia (Red-Blind), Deuteranopia (Green-Blind), Tritanopia (Blue-Blind), or Achromatopsia.
Adjust Simulation Severity
Use the severity slider to fine-tune partial anomaly vs total cone dichromacy.
Compare & Download
Inspect the side-by-side comparison view and download simulated image graphics.
Key Features & Capabilities
- Machado 2009 matrix spectral color transformations
- Protanopia (Red-blind), Deuteranopia (Green-blind), Tritanopia (Blue-blind), and Achromatopsia modes
- Interactive side-by-side and split scrubber comparison views
- Adjustable deficiency severity slider (0% to 100%)
- Full-resolution simulated image PNG/JPG export
- 100% offline client-side pixel processing
100% Client-Side Privacy: All operations occur locally in your web browser memory using JavaScript and WebAssembly. Your files, text payloads, and images are never uploaded to external servers or stored in cloud databases.
Frequently Asked Questions
View All Platform FAQsWhich color transformation matrices are used?
This simulator applies standard physiological color transformation matrices (Machado, Oliveira, and Fluck 2009 / Viénot et al. 1999) operating directly on LMS cone spectral sensitivity responses.
Why is testing UI designs for color blindness important?
Over 8% of men and 0.5% of women experience color vision deficiency. Ensuring interactive state cues do not rely solely on red/green color contrast is required by WCAG 2.1 AA accessibility guidelines.
What is the difference between Protanopia and Deuteranopia?
Protanopia is caused by missing red L-cones (causing red colors to appear dark or brownish-grey), while Deuteranopia is caused by missing green M-cones (making reds and greens indistinguishable).
Are my design images uploaded to any server?
No. All canvas pixel manipulations happen 100% locally within your browser using HTML5 Canvas getImageData and putImageData APIs.
Experiencing an issue with Color-Blindness Image Simulator?
Notice a bug, calculation error, or unexpected result? Let us know.