Home/Color Blindness Simulator

Color Blindness Simulator – See Colors as Color Blind Users Do

4.2 Rating from 93 people who voted
Share this page
Color Blindness Simulator Visualize how colors appear with different types of color vision deficiency
Uses Brettel, Viénot & Mollon (1997) simulation algorithm. Upload images or test individual colors. All processing happens locally in your browser - no data is sent to any server.
100%
Original Image
No image
Upload an image to preview
Simulated View
Deuteranomaly
Simulation will appear here
Test Individual Color
#3B82F6
← Original Color
Protanopia
Complete absence of red cone photoreceptors. Affects ~1% of males.
Deuteranopia
Complete absence of green cone photoreceptors. Affects ~1% of males.
Tritanopia
Complete absence of blue cone photoreceptors. Very rare (~0.001%).
Anomalous Trichromacy
One cone type has altered spectral sensitivity. Most common form.

About the Color Blindness Simulator

The Color Blindness Simulator shows how an image or a single color appears to people with different types of color vision deficiency. Upload an image to compare the original against a simulated view side by side, or test an individual hex color to see how it shifts under each condition. Adjust the intensity slider to see mild to full-strength versions of each deficiency.

It’s built for designers and developers checking that charts, buttons, and UI states remain distinguishable for color blind users. Once you’ve identified a problem color, the Color Palette Generator can help you build an accessible replacement palette, and the Color Converter is handy for translating your chosen hex value into RGB or HSL for your codebase.

BigToolSite Team validated the simulation matrices against known protanopia, deuteranopia, and tritanopia reference values to confirm the color shifts match the expected physiological deficiency for each type.

How to Use the Color Blindness Simulator

  • Select a Color Vision Type from the dropdown, grouped by red-green, blue-yellow, and total color blindness.
  • Adjust the Simulation Intensity slider to control how strong the effect appears.
  • Upload an image to compare the Original and Simulated views side by side.
  • Or, use the Test Individual Color section to check a single hex value.
  • Download the original or simulated image once you’re done.

Example Usage

Input: A UI screenshot with red error text and green success text

Output (Deuteranopia): Both colors shift toward a similar brownish-yellow tone, making it hard to tell error and success states apart at a glance.

This is a common accessibility issue since red-green deficiencies affect a meaningful share of male users. If your design relies on color alone to convey status, pairing it with icons or the CSS Gradient Generator for added visual contrast can help keep the interface usable for everyone.

Frequently Asked Questions

No, all image processing happens locally in your browser using canvas, so the image never leaves your device.

Deuteranopia is the complete absence of green cone photoreceptors, while deuteranomaly is a milder form where the green cones are present but have shifted sensitivity, producing a less extreme color shift.

It blends between the original color and the fully simulated color, letting you preview mild to severe versions of the selected color vision deficiency.

Deuteranomaly and deuteranopia are the most common forms, so they’re a good starting point before checking rarer types like tritanopia.

Yes, it’s completely free with no signup required.