Color blindness simulator
Check whether your colors are distinguishable for color-blind people, on a color or an image.
Simulate a color
Original
#E63946
Protanopia (red)
#6C6545 · ΔE 71
Deuteranopia (green)
#988940 · ΔE 70
Tritanopia (blue)
#FD0040 · ΔE 16
Protanomaly (mild red)
#A65E43 · ΔE 40
Deuteranomaly (mild green)
#B37541 · ΔE 47
Tritanomaly (mild blue)
#E83646 · ΔE 1
Achromatopsia (no color)
#7C7C7C · ΔE 74
Simulate an image
Downscaled to 360 px wide for local processing.
The simulation uses the Machado et al. (2009) matrices in linear RGB space, the standard model for protanopia, deuteranopia and tritanopia, plus luminance for achromatopsia. ΔE (CIE76) shows how much the color changes: below ~2 the difference is barely perceptible.
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
Choosing a palette or a warning color seems simple until someone with color blindness cannot tell green from red. Around 8% of men and 0.5% of women have some form of color vision deficiency, so relying on color alone for a state (a red border for errors, green for success) leaves many people out. This simulator applies the Machado matrices in linear RGB to show you exactly what a person with each type of color blindness sees, both on a specific color and on an image, and it also reports the color distance (ΔE) so you know how much has faded.
Features
- ✓Seven types: protanopia, deuteranopia, tritanopia, their mild variants and achromatopsia
- ✓Single-color simulation with contrast against white and black
- ✓Full simulation of an uploaded image, processed in the browser
- ✓ΔE (CIE76) measure of how much each color changes
- ✓Download each simulated version as PNG
How do I check if my colors are color-blind friendly?
- 1
Pick a color
Use the picker or type a HEX to see every simulation at once.
- 2
Read ΔE
A high ΔE means the color changes a lot; a low one means it barely differs from the original.
- 3
Test an image
Upload a screenshot of your UI or a chart and compare the seven versions.
- 4
Fix and re-check
Adjust the colors until shapes and text stay clear in every simulation.
Frequently asked questions
Which types of color blindness does it simulate?
Protanopia (no red cones), deuteranopia (green), tritanopia (blue), their mild versions protanomaly, deuteranomaly and tritanomaly, and achromatopsia (grayscale vision from complete color loss).
Is it faithful to what a color-blind person sees?
It is a simulation based on the Machado et al. (2009) matrices, the standard model in research and design. It is a very good approximation for the full type, though real perception varies from person to person and no model reproduces 100% of cases.
What is the ΔE value shown?
It is the CIE76 color distance between the original and the simulated color. The higher it is, the more the color changes. Below about 2 the difference is barely perceptible; above 10 the color is clearly different.
Are my images uploaded to a server?
No. Images are processed with Canvas in your own browser and are not sent to any server. Nothing leaves your device.
Related tools
Embed Color Blindness Simulator on your site
Add Color Blindness Simulator to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/colorblind-simulator"
width="100%"
height="700"
frameborder="0"
title="Color Blindness Simulator — miguelacm.es"
></iframe>