πŸ‘οΈ

Colour Blindness Simulator

Upload an image to see how it appears to people with different types of colour blindness β€” essential for accessible design.

Advertisement
About this colour blindness simulator

The Colour Blindness Simulator shows you how any image looks to people with colour vision deficiency, side by side with the original β€” so you can spot accessibility problems before they reach real users.

Roughly one in twelve men and one in two hundred women see colour differently from the trichromatic norm, most often struggling to tell reds from greens. This tool recreates that experience by applying scientifically derived colour-transformation matrices to every pixel of your image. Upload a photo, screenshot, chart, or interface mock-up, then switch between Protanopia, Deuteranopia, Tritanopia, their milder anomalous variants, and full Achromatopsia to watch the colours shift in real time. The matrices are based on the widely cited ViΓ©not 1999 and Brettel 1997 models, the same approach used by professional accessibility tooling. People use it to:

Everything runs locally in your browser using an HTML canvas, so the image you upload never leaves your device β€” nothing is sent to a server or stored anywhere. Keep in mind that colour vision is a spectrum and individual perception varies, so the simulation is a faithful approximation for design review rather than an exact match for any one person's eyes.

How to use
  1. Upload an image using the file picker or drag it onto the drop zone β€” PNG, JPG, GIF, or WebP all work.
  2. Select a colour blindness type from the tabs, such as Deuteranopia, Protanopia, or Tritanopia.
  3. Read the short description for the chosen type to understand which cones are affected.
  4. Compare the original and simulated views side by side to find colours that become hard to tell apart.
  5. Adjust your palette if needed, then click Download Simulated to save the simulated version, or choose New Image to test another.
FAQ

The simulator covers Protanopia, Deuteranopia, Tritanopia, their milder anomalous forms (Protanomaly, Deuteranomaly, Tritanomaly), and Achromatopsia (total colour blindness). Matrices follow the Vienot 1999 / Brettel 1997 models.

No. Images are processed entirely in your browser using a canvas β€” nothing is sent to any server.

Colour blindness is a spectrum and individual perception varies. These matrices give a useful approximation for design review but cannot match any specific person's vision exactly.

The common forms are red-green deficiencies and the rarer blue-yellow deficiency. Each comes in a strong form, where a cone type is missing, and a milder anomalous form, where a cone is present but shifted. Total colour blindness, called achromatopsia, where everything appears in shades of grey, is very rare.

Protanopia is red-blindness, where the long-wavelength cones are missing and reds look dark. Deuteranopia is green-blindness, the most common red-green type, where the medium-wavelength cones are absent. Tritanopia is the rare blue-blindness, where the short-wavelength cones are missing and blues and yellows become hard to separate.

Never rely on colour alone to convey meaning. Pair colour with text labels, icons, patterns, or shapes, avoid problematic red-green pairings, and keep strong brightness differences between adjacent colours. Run your screens through this simulator to confirm that important distinctions still hold under each type.

No. This simulator shows how colours shift under different types of colour blindness, but it does not measure contrast ratios. WCAG contrast is a separate requirement, so use a dedicated contrast checker alongside this tool to confirm text meets the AA or AAA thresholds.