Color Blindness Simulator

What the Color Blindness Simulator Does

The Color Blindness Simulator shows how an image or a single color looks to people with different types of color vision deficiency. Upload a photo, chart, interface screenshot, or design mockup, then pick a vision type. The tool renders the original and the simulated version side by side so you can spot elements that lose meaning when red, green, or blue perception changes.

Seven conditions are covered: protanopia, deuteranopia, tritanopia, their milder "anomaly" forms (protanomaly, deuteranomaly, tritanomaly), and achromatopsia, which is total color blindness. You can also switch on a grid that shows all seven simulations at once and download the simulated image as a PNG. Everything runs in your browser, so nothing you upload leaves your device.

How to Use the Simulator

1. Upload an image, or scroll down to test a single color with the color picker.
2. Choose a vision type from the dropdown, such as Deuteranopia or Achromatopsia.
3. Compare the original and simulated canvases side by side.
4. Click Show all types to see the image through all seven deficiencies at once.
5. Download the simulated image to share it with your team or attach it to a review.

Understanding the Vision Types

Human color vision relies on three cone types that respond to long (red), medium (green), and short (blue) wavelengths. Color vision deficiency happens when one cone type is missing or weakened.

• Protanopia and protanomaly: the red cone is missing or weak. Reds appear darker and can be confused with greens and browns.
• Deuteranopia and deuteranomaly: the green cone is missing or weak. This is the most common group and affects red-green distinctions.
• Tritanopia and tritanomaly: the blue cone is missing or weak. Blues shift toward green and yellow distinctions fade.
• Achromatopsia: vision is fully grayscale, with very low tolerance for bright light in real life.

The simulator applies published color transformation models in the LMS cone response space. The anomaly types blend the original cone signal with a dichromatic response, which approximates how a weakened cone behaves.

Why This Matters for Design

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. That is roughly 300 million people worldwide. If a chart uses red and green lines as its only distinction, if a form marks errors in red text without another cue, or if a status badge relies on a colored dot alone, a meaningful share of your audience will miss the message.

Simulating your work takes seconds and catches problems before release. Common fixes are cheap: add patterns or dashes to chart lines, include icons or labels next to colored statuses, and raise contrast so elements stay distinguishable in grayscale. The Color Contrast Checker measures whether text meets WCAG AA and AAA ratios, which complements what you see here.

Testing Images and Testing Colors

Some accessibility checks work best on a full image, and some start with a single color. The quick color test on this page lets you paste a hex value or use the picker and see the simulated result instantly, which is handy when you are evaluating a brand palette. When a color passes the single color test, move to full screenshots: gradients, photos, and overlapping translucent layers can behave differently at the pixel level.

If you need to convert values between HEX, RGB, HSL, and CMYK while you test, the Color Converter covers every common format, and the Color Scheme Generator builds palettes that you can run back through the simulator.

Designing Beyond Color

• Do not use color as the only way to convey information. Add text, icons, or patterns.
• Keep a strong lightness difference between foreground and background, not just a hue difference.
• Avoid pairing red and green as the only two categories in charts and maps.
• Test error and success states in every simulation type, not just the default one.
• Prefer blue and orange combinations when you need two clearly distinct series.

Privacy and File Support

Image processing uses the browser Canvas API, so photos and screenshots stay on your machine. JPG, PNG, WebP, GIF, and BMP files are supported. Very large images are scaled to a maximum dimension of 2000 pixels before processing to keep the tool responsive, and the full-size original is never modified on disk. The simulator works offline once the page has loaded.