Skip to content
T
Tools.Town
Free Online Tools for Everyone
👁

Color Blindness Simulator

100% Free

Preview how an image or design looks with protanopia, deuteranopia, tritanopia, or full colour blindness — right in your browser.

Instant
Client-Side
PNG · JPG · WebP

Choose a JPG, PNG, WebP, or GIF. Everything runs in your browser — nothing is uploaded.

Embed This Tool

Easy to Embed

Add Color Blindness Simulator to your website or blog in seconds.

  • Responsive design
  • Lightweight & fast
  • No backend required
  • Always up-to-date
<iframe
  src="https://tools.town/embed/color-blindness-simulator/"
  width="100%"
  height="600"
  style="border:none; border-radius:12px;"
  loading="lazy"
  title="Color Blindness Simulator">
</iframe>

Share This Tool

Share Instantly

Share Color Blindness Simulator with anyone — no login required.

  • Shareable link
  • No login required
  • Works on any device
  • No account needed

Share via

Advertisement

How to Use

  1. 1 Upload your image, screenshot, or design mockup — JPG, PNG, WebP, or GIF.
  2. 2 Pick a vision type: protanopia, deuteranopia, tritanopia, or achromatopsia.
  3. 3 Compare the normal-vision and simulated views side by side.
  4. 4 Switch types to check each one, then download the simulated image to share.

Features

  • Four simulations: protanopia, deuteranopia, tritanopia, and achromatopsia (full colour blindness).
  • Side-by-side before/after so you can spot colours that collapse together.
  • 100% client-side — your image never leaves your device.
  • Export the simulated view as PNG, JPG, or WebP with adjustable quality.
  • Transparency is preserved when you export as PNG or WebP.

Why it Matters

Roughly one in twelve men and one in two hundred women have some form of colour vision deficiency. A red/green status badge, a chart that codes data only by hue, or a 'tap the green button' instruction can all become unreadable for them. Simulating your design through each CVD type reveals where colour alone is carrying meaning — so you can add a second cue (labels, icons, patterns, or contrast) before it ships. This tool applies the standard dichromat simulation matrices pixel-by-pixel in your browser, so checking is instant and private.

★★★★★

Use Cases

Accessibility Review

Check UI screenshots and mockups so colour-coded states stay distinguishable for colour-blind users.

Charts & Dashboards

Verify that graph series, heatmaps, and legends don't rely on red/green alone.

Brand & Design

Test logos, palettes, and marketing art the way a meaningful slice of your audience will see them.

Education & Empathy

Show stakeholders exactly what colour blindness does to a design to win buy-in for inclusive choices.

How to use

  1. Upload an image, screenshot, or design mockup (JPG, PNG, WebP, or GIF).
  2. Choose a vision typeProtanopia, Deuteranopia, Tritanopia, or Achromatopsia.
  3. Compare the normal-vision and simulated views side by side.
  4. Cycle through each type, then download the simulated image to drop into a report or share with your team.

What each type means

Colour vision relies on three types of cone in the retina. Each kind of colour blindness corresponds to one of them working differently or not at all:

  • Protanopia — the long-wavelength (red) cones are missing. Reds look dark and muddy, and red/green pairs collapse.
  • Deuteranopia — the medium-wavelength (green) cones are missing. This is the most common type; greens and reds again become hard to separate.
  • Tritanopia — the short-wavelength (blue) cones are missing. Blues and yellows blur together. It’s rare.
  • Achromatopsia — no usable colour cones at all, so the world is seen in shades of grey. Very rare, but a useful worst-case check.

Why simulate at all?

If a design conveys meaning through colour alone — a green “success” pill next to a red “error” pill, a chart whose only legend is hue — then anyone whose colour vision differs may miss that meaning entirely. Running the design through each simulation makes those failures obvious, so you can add a redundant cue: a label, an icon, a shape, or simply more contrast. Pairing this with a contrast checker covers most colour-accessibility issues before launch.

Private by design

Every pixel is transformed locally in your browser via the Canvas API using the standard CVD simulation matrices. Your image is never uploaded, so the preview is instant and your files stay private.

Frequently Asked Questions

Which types of colour blindness can it simulate?
Four: protanopia (red-blind), deuteranopia (green-blind, the most common), tritanopia (blue-blind), and achromatopsia (total colour blindness, seen as greyscale). These cover the dichromat and monochromat cases designers most need to check.
How accurate is the simulation?
It uses the widely-reproduced HCIRN/Wickline dichromat matrices applied in sRGB space — the same approach as popular simulators like Coblis. It's an approximation, not a clinical model, but it's reliable for revealing which colour pairs become hard to tell apart.
Is my image uploaded anywhere?
No. The simulation runs entirely in your browser using the Canvas API. Your image never leaves your device.
Can colour-blind users use this to 'fix' their vision?
No — it doesn't correct or enhance colours. It's a preview tool for designers and developers to see how their work appears to someone with a colour vision deficiency.

Related Tools You Might Like

Browse more free tools