Color Blindness Simulator
Upload an image and preview how it might look to someone with a common color vision deficiency — Protanopia, Deuteranopia or Tritanopia — side by side with the original.
How to Use the Color Blindness Simulator
- Click "Upload Image" and choose a photo, screenshot or design mockup from your device.
- Select a simulation mode: Protanopia, Deuteranopia or Tritanopia.
- Compare the original and simulated versions side by side.
- Click "Download Simulated PNG" to save the simulated version for accessibility documentation.
Why Use This Tool?
What do Protanopia, Deuteranopia and Tritanopia mean?
These are the three common forms of dichromatic color blindness. Protanopia is the absence of red-sensing cones, Deuteranopia is the absence of green-sensing cones (the most common form, affecting roughly 1% of men), and Tritanopia is the rare absence of blue-sensing cones. Each condition changes which colors are distinguishable — for example, reds and greens can become very difficult to tell apart under protanopia and deuteranopia.
How is the simulation actually calculated?
The tool reads every pixel of your uploaded image using the canvas getImageData API, applies a documented 3×3 color-transformation matrix specific to the selected deficiency to each pixel's red, green and blue values, then writes the transformed pixels back with putImageData. This is the same category of matrix-based approach used by established color-blindness simulation tools, applied entirely on your device.
Why should designers check this?
Color vision deficiency affects a meaningful share of any audience — approximately 1 in 12 men and 1 in 200 women globally. Checking how your UI, infographics or charts look under common deficiencies helps you catch places where information is conveyed by color alone (like a red/green status indicator) and add a second visual cue such as an icon, label or pattern.
Is this simulation medically accurate?
This tool is intended as a quick accessibility-awareness preview for designers, not a diagnostic or clinically precise tool. Real-world color perception varies between individuals even within the same deficiency type. Use it to catch obvious problems, but pair it with proper contrast checks and accessibility guidelines (like the Color Contrast Checker on this site) for a complete accessibility review. Your uploaded image is processed entirely in your browser and is never uploaded to a server.