Color Blindness Simulator

Upload any image to see how it appears to people with different types of color vision deficiency. All processing happens in your browser — your images are never uploaded.

Red-Green
Blue-Yellow
Complete

Drag & drop your image here or click to select

Supports JPG, PNG, WebP · You can also paste from clipboard

Or try a sample image

🔒 Your images are processed entirely in your browser. Nothing is uploaded to our servers.

What is a Color Blindness Simulator?

A color blindness simulator transforms an image to approximate how it appears to someone with a color vision deficiency (CVD). It applies a peer-reviewed color transformation in your browser, so you can see — rather than guess — whether a photo, chart, map, or interface still works for the roughly 1 in 12 men and 1 in 200 women who perceive color differently.

Unlike a simple CSS filter, this tool decodes each image to linear light before transforming it and re-encodes it afterwards. Skipping that gamma step is the most common bug in CVD simulators — it makes mid-tones look unnaturally dark — so the results here stay perceptually faithful.

Use the severity slider to move smoothly from mild anomalous trichromacy (a shifted cone) all the way to full dichromacy (a missing cone), or open the "All types" grid to compare every form of color blindness against your original at a glance.

Which algorithm does this simulator use?

There is no single "best" CVD algorithm — the most accurate choice depends on which cone is affected. This simulator picks the right model per deficiency, the same approach used by the open-source DaltonLens reference tool:

Machado 2009 — for red-green (protan & deutan)

The Machado, Oliveira & Fernandes (2009) model is physiologically based and ships a separate matrix for each severity level. That means protanomaly and deuteranomaly are simulated correctly at any strength, instead of being faked by fading a full-dichromat result toward the original.

Brettel 1997 — for blue-yellow (tritan)

For the blue-yellow axis, Brettel, Viénot & Mollon (1997) remains the only validated method. It projects each color onto one of two half-planes in LMS cone space, chosen per pixel — the detail most one-matrix implementations get wrong for tritanopia.

Luminance grayscale — for monochromacy

Achromatopsia is simulated by collapsing color to BT.709 luminance, preserving the relative brightness a person without functioning color cones would still perceive.

Every transform runs on sRGB-decoded linear RGB and is re-encoded for display. Matrices are taken from the public-domain libDaltonLens and the colour-science Machado dataset.

How to Take the Test

Upload an Image

Drag and drop, click to select, or paste an image from your clipboard.

Choose a Type

Select from 8 color blindness types grouped by Red-Green, Blue-Yellow, and Complete.

Compare & Download

View the original and simulated images side by side. Download the result as PNG.

Types of Color Blindness Simulated

Red-Green Color Blindness (Protan & Deutan)

The most common form, affecting about 8% of males. Protanopia (no red cones) and Deuteranopia (no green cones) cause difficulty distinguishing reds, greens, browns, and oranges. Protanomaly and Deuteranomaly are milder forms where the cones are present but shifted in sensitivity.

Blue-Yellow Color Blindness (Tritan)

A rare form affecting less than 0.01% of the population. Tritanopia (no blue cones) causes difficulty distinguishing blue from green and yellow from violet. Unlike red-green deficiency, it affects males and females equally and is sometimes acquired through aging or eye disease.

Complete Color Blindness (Monochromacy)

The rarest form where the person sees no color at all (Achromatopsia) or has severely reduced color perception (Achromatomaly). People with complete color blindness see the world in shades of gray and often experience light sensitivity and reduced visual acuity.

Who Needs a Color Blindness Simulator?

Designers & Developers

Ensure your UI, charts, and color palettes remain accessible and distinguishable for users with color vision deficiency.

Educators & Students

Teach or learn about color vision deficiency with real visual examples instead of abstract descriptions.

Family & Friends

Understand how your loved ones with color blindness experience the visual world around them.

Accessibility checklist for designers

A simulator shows you the problem; these habits prevent it. If your design still communicates clearly across the "All types" grid above, it will work for the vast majority of users.

  • Never rely on color alone — pair it with text labels, icons, patterns, or position.
  • Avoid red/green as the only difference between states (the single most common failure).
  • Use a colorblind-safe palette such as Okabe-Ito or ColorBrewer's qualitative sets.
  • Keep a WCAG contrast ratio of at least 4.5:1 for text, 3:1 for large text and UI components.
  • Differentiate chart series with direct labels, line styles, or textures — not hue alone.
  • Test the final design here at full severity for protan, deutan, and tritan before shipping.

Sources

  1. Machado, Oliveira & Fernandes (2009) — A Physiologically-Based Model for Simulation of Color Vision Deficiency (IEEE TVCG)
  2. DaltonLens — Review of open-source color blindness simulations & Brettel/Viénot/Machado matrices
  3. National Eye Institute (NEI) — Overview of color blindness types, causes, and diagnosis
  4. American Academy of Ophthalmology — Clinical information on color vision deficiency

Frequently Asked Questions

No. All image processing happens entirely in your browser using HTML5 Canvas. Your images are never uploaded, stored, or transmitted to any server. This ensures complete privacy.
It uses the algorithm best suited to each deficiency: Machado 2009 for red-green types (with a true per-severity model for the milder anomalous forms) and Brettel 1997 for the blue-yellow axis. Both run on gamma-correct linear RGB. This matches the approach of the open-source DaltonLens reference tool. That said, no simulation can perfectly replicate any one person's vision — color blindness varies between individuals, and a screen can only approximate it.
Protanopia is a complete absence of red cone cells, making it impossible to perceive red light. Protanomaly is a milder form where red cones are present but have shifted sensitivity, resulting in reduced but not absent red perception. The same relationship exists between Deuteranopia/Deuteranomaly (green) and Tritanopia/Tritanomaly (blue).
The simulator supports JPEG, PNG, and WebP image formats. You can upload images by dragging and dropping, clicking to select a file, or pasting from your clipboard (Ctrl+V / Cmd+V). Large images are automatically scaled down for faster processing.
Yes! This is one of the primary use cases. Upload screenshots of your UI, charts, graphs, or any visual design to see how they appear to people with different types of color blindness. Pay special attention to whether important information is still distinguishable. For formal accessibility testing, also consider checking WCAG color contrast ratios.
Most people with color blindness are not fully dichromatic — they have a 'weak' rather than 'missing' cone, called anomalous trichromacy. The severity slider lets you model that whole range: 0% is normal vision, 100% is full dichromacy (e.g. complete protanopia), and the values in between represent milder protanomaly or deuteranomaly. For red-green types each step uses a distinct, physiologically-derived Machado matrix rather than a simple fade.
The 'All types' grid renders your image through every deficiency simultaneously — protan, deutan, tritan, and monochromacy, in both complete and anomalous forms. For accessibility work this is the fastest way to spot a palette that collapses for one group while looking fine to you. If important information survives every tile, your design is robust.