Color Blindness Simulator

Test How Colors & Images Appear With 8 Types of Color Vision Deficiency

📷

Drop an image here or click to upload

PNG, JPG, WebP, GIF, BMP — processed entirely in your browser

100%

Original

Upload an image to begin

Simulated

Upload an image to begin

What Is a Color Blindness Simulator?

A color blindness simulator is a tool that transforms images, screenshots, and color palettes to show how they appear to people with color vision deficiency (CVD). It applies scientifically validated color transformation matrices to simulate protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), anomalous trichromacies, and achromatopsia. This helps designers, developers, and accessibility professionals ensure their digital products are perceivable by the approximately 300 million people worldwide with some form of color blindness.

How the Simulation Works

The simulator uses the Machado, Oliveira & Fernandes (2009) physiologically-based color vision model. Each pixel's sRGB value is linearized, converted to the LMS cone response space (Long, Medium, Short wavelength cones), and the appropriate cone channel is collapsed or shifted to approximate dichromatic or anomalous trichromatic vision. The result is converted back to displayable sRGB. This produces a scientifically valid approximation of how someone with that specific deficiency type would perceive the colors. For anomalous trichromacies (protanomaly, deuteranomaly, tritanomaly), severity blending interpolates between normal vision and full dichromacy.

Types of Color Vision Deficiency

Protanopia — Red-blind (~1% of males). Difficulty distinguishing red, orange, and brown. Reds appear darker and may be confused with black or dark gray.
Deuteranopia — Green-blind (~1% of males). Difficulty distinguishing green, red, yellow, and brown. Most common dichromacy type.
Tritanopia — Blue-blind (<0.1%). Difficulty distinguishing blue from green, and yellow from violet/pink. Rarest form.
Protanomaly — Red-weak (~1% of males). Reduced sensitivity to red light. Colors appear shifted toward green.
Deuteranomaly — Green-weak (~5% of males). Reduced sensitivity to green light. Most common form of CVD overall.
Tritanomaly — Blue-weak (<0.1%). Reduced sensitivity to blue light. Colors appear shifted toward green/red.
Achromatopsia — Total color blindness (<0.01%). Near-complete inability to perceive color, leaving only luminance/brightness perception.
Achromatomaly — Partial color blindness (~0.1%). Severely reduced color perception with some residual hue discrimination.

Why Developers and Designers Need This Tool

WCAG 2.2 Success Criterion 1.4.1 (Use of Color) requires that color is not the sole means of conveying information. Status indicators (green checkmark for success, red X for error), chart series distinguished only by hue, and link colors that only differ from body text are common violation patterns. This simulator lets you upload UI screenshots or test specific color pairs to identify which elements become indistinguishable for CVD users before shipping to production.

WCAG Contrast & Color Accessibility

Color blindness simulation complements WCAG contrast checking (SC 1.4.3 and 1.4.6). Two colors can have adequate contrast ratio yet still be confusable for someone with CVD if they differ primarily in hue. Use this simulator alongside a contrast checker to validate both luminance contrast and hue distinction. Best practice: add icons, labels, patterns, or text in addition to color for every meaningful state.

Frequently Asked Questions

Is this color blindness simulator accurate?

It uses the Machado et al. (2009) physiologically-based model, the same algorithm used by professional tools like Adobe Photoshop and Chrome DevTools. While no simulation can perfectly replicate an individual's perception (severity and adaptation vary between people), it is highly reliable for catching real accessibility issues in digital designs.

Are my images uploaded to a server?

No. All image processing happens entirely in your browser using the Canvas API. Your images never leave your device. This ensures complete privacy for sensitive UI mockups and proprietary designs.

How is this different from a hue rotation filter?

Simple hue rotation is not a valid CVD simulation. Real color blindness affects specific cone photoreceptor channels. Our tool uses the Machado 2009 LMS cone space transformation, which accurately models how the eye's L, M, and S cones respond under each deficiency type. This is the same science-based approach used in accessible design research.

Can I use this for WCAG compliance audits?

Yes. Testing your designs with a CVD simulator is a recognized method for evaluating WCAG 2.2 SC 1.4.1 (Use of Color). Combine simulation with a proper contrast checker to document compliance. Note that simulation is a design aid, not a substitute for user testing with people who have CVD.

What is the severity slider for?

Most people with color vision deficiency have anomalous trichromacy (partial deficiency) rather than complete dichromacy. The severity slider lets you simulate mild (e.g., deuteranomaly at 25%) through severe (deuteranopia at 100%) to test across the full spectrum of real-world CVD presentations.

What percentage of users are affected by color blindness?

Approximately 8% of men and 0.5% of women worldwide have some form of color vision deficiency. That is about 1 in 12 men and 1 in 200 women — roughly 300 million people globally. Red-green deficiencies (protan/deutan) account for over 99% of all cases.

How can I fix color accessibility issues?

Never rely on color alone. Add redundant cues: icons + color for status indicators, labels + color for chart series, underlined + colored links. Use perceptually uniform color scales like Viridis or Cividis. Maintain strong luminance contrast between foreground and background. Test with a simulator, fix issues, re-test, and validate with actual users when possible.

Best Practices for Color Accessibility

  • Redundant encoding: Pair color with text, icons, patterns, or shapes. A green checkmark plus a label is better than green alone.
  • Perceptually uniform scales: Use Viridis, Cividis, or ColorBrewer palettes that maintain distinction under CVD simulation.
  • Strong luminance contrast: Ensure text meets WCAG AA 4.5:1 (normal) or 3:1 (large text). CVD does not affect luminance perception.
  • Avoid common problem pairs: Red/green, green/brown, blue/purple, and green/gray are frequently confused under red-green CVD.
  • Test early and often: Check color combinations during design, not after implementation. Use this simulator on every UI mockup.

Related Tools

Created: 2026-07-25

Comments & Ratings

Be the first to comment.