Color Blindness Simulator
Upload a screenshot, UI mockup or photo and preview Protanopia, Deuteranopia, Tritanopia, and Achromatopsia at any severity. Everything runs locally in your browser.
Drop an image here or click to upload
Tip: for website screenshots, press PrtScr → paste into any image app → save → upload. For remote URLs, save first due to browser security.
Load an image to begin. Or click “Use Sample”.
Color Blindness Simulator — FAQs
What does this color blindness simulator actually do?
It remaps the red, green and blue channels of your image with well‑known transformation matrices to approximate how common color vision deficiencies can change color perception. You can dial the severity from subtle (anomalous trichromacy) to complete loss for that channel (dichromacy), and compare changes in a split view.
Which types of color blindness can I preview?
You can simulate Deuteranopia/Deuteranomaly (green‑weak), Protanopia/Protanomaly (red‑weak), Tritanopia/Tritanomaly (blue‑weak) and Achromatopsia/Achromatomaly (greyscale). These cover the vast majority of practical design checks.
Is this accurate enough for professional UI/UX work?
It’s a strong approximation that’s widely used in design tooling for quick checks. Real vision varies by person and lighting. For critical accessibility sign‑off, pair this with a contrast ratio check and, when possible, feedback from users with color vision deficiency.
Does my image leave my device?
No. The simulator runs entirely in your browser on a canvas element. Nothing is uploaded to any server.
Why does a remote image sometimes fail to load?
Browsers block drawing cross‑origin images to a canvas unless the image server sends the right CORS headers. Save the image to your computer first, then upload it here.
How should designers use this tool in a workflow?
Check key screens and states, especially error/success colors, focus states, charts, and status badges. If two colors collapse into one under a simulation, add a second cue (icon, pattern, shape) or increase contrast.
How do I interpret the severity slider?
0% is the original image. 40–60% mimics anomalous trichromacy (partial weakness). 100% approximates dichromacy (complete loss of that cone response) for the selected type.
Will this change my original file?
No. Your original remains untouched. Use the “Download Processed PNG” button to save the simulated view as a separate file.
What image sizes work best?
Standard screenshots (≤ 3000 px wide) are ideal. Very large images may process slowly; toggle off “High quality” if you just need a quick check.
Is this a medical test?
No. This is a design and education tool. For medical diagnosis, consult an eye‑care professional.
Does this help with accessibility compliance?
It helps you spot risky color‑only signals and improve inclusivity, but compliance relies on multiple factors. Always verify text contrast against WCAG and ensure non‑color cues are present.
Keywords: color blindness simulator, deuteranopia simulator, protanopia preview, tritanopia checker, achromatopsia filter, accessible color palette testing for UI and web design.