About the Color Blindness Simulator
This color blindness simulator shows how a set of colors looks to people with the main types of color vision deficiency: protanopia (no red cones), deuteranopia (no green cones), tritanopia (no blue cones) and achromatopsia (no color vision). Paste the HEX codes from your chart, brand palette or UI theme and you get the simulated colors for every type side by side, plus a check of which pair becomes hardest to distinguish.
It is meant for designers, data-visualisation authors and developers who want their charts, status colors and maps to work for everyone. Red–green deficiencies are by far the most common type and are inherited on the X chromosome, so they are much more frequent in men — which means a red/green "good/bad" legend can be unreadable for a noticeable share of any audience.
Simulations use the physiologically based model of Machado, Oliveira and Fernandes (2009) at full severity, applied in linear RGB. Real color vision varies — many people have milder anomalous trichromacy — so treat the result as a worst case, and pair color with labels, patterns or shapes wherever meaning matters.
How to use the color blindness simulator
- 1Paste the colors from your chart, palette or UI (HEX, rgb() or names).
- 2Choose a deficiency to simulate — start with deuteranopia, the most common.
- 3Compare the original and simulated swatches.
- 4Look at the hardest pair and the verdict; change the lightness of clashing colors.
- 5Re-check until the smallest difference is comfortably above 10 ΔE.
Formula and method
Each color is converted from sRGB to linear RGB, multiplied by the 3 × 3 simulation matrix for the chosen deficiency from Machado, Oliveira & Fernandes (2009) at severity 1.0 (full dichromacy), clipped to the displayable range and converted back to sRGB. Achromatopsia is simulated as gray with the same WCAG relative luminance (0.2126 R + 0.7152 G + 0.0722 B in linear light).
To flag clashes, every pair of simulated colors is compared in the OKLab perceptual color space; the distance × 100 is reported as ΔE (about 2 is a just-noticeable difference). The verdict thresholds — under 5 a problem, 5–10 caution, 10 or more good — are practical rules of thumb for chart and UI colors, not a formal standard.
- RGB_lin
- Linear-light red, green and blue (sRGB curve removed)
- M_type
- Machado 2009 matrix for protanopia, deuteranopia or tritanopia
- ΔE
- Perceptual difference: OKLab Euclidean distance × 100
Worked examples
Default chart palette under deuteranopia
The classic red, green, blue, orange and purple chart colors are at least 14.2 ΔE apart with normal vision, but with deuteranopia red #D62728 and green #2CA02C both become olive (#8B7C1F and #968838), only 4.1 ΔE apart, and blue and purple drift close together too. Those series need direct labels or different lightness.
Traffic-light red vs green under protanopia
Pure red and pure green are not confused by protanopes because they differ hugely in lightness: red turns into a dark olive (#6D5F00) and green into a bright yellow (#FFE500), still 44 ΔE apart. It is equal-lightness reds and greens that cause trouble.
Bootstrap danger and success colors under deuteranopia
Bootstrap’s red #DC3545 and green #28A745 are 33.9 ΔE apart normally, but they have similar lightness. Under deuteranopia both become khaki browns (#908340 and #9B8E4D) only 3.7 ΔE apart, so a success/error indicator using color alone fails for green-blind users.
Frequently asked questions
What is the most common type of color blindness?+
Red–green color vision deficiency is by far the most common, and deuteranomaly (reduced green sensitivity) is its most frequent form, according to the US National Eye Institute. Blue–yellow (tritan) deficiencies are less common, and complete color blindness (achromatopsia) is rare.
What is the difference between protanopia and deuteranopia?+
Protanopia means the long-wavelength (red) cones are missing, so reds also look darker. Deuteranopia means the medium-wavelength (green) cones are missing; reds keep their brightness. Both make red and green hard to tell apart.
How do I make a color-blind friendly palette?+
Vary lightness as well as hue, avoid relying on red versus green, and prefer combinations like blue and orange. Add direct labels, patterns or icons so meaning never depends on color alone, as WCAG 1.4.1 requires.
How accurate are color blindness simulations?+
The Machado 2009 model is widely used and physiologically based, but it represents complete dichromacy on a standard sRGB display. People with anomalous trichromacy see more color than shown, and individual vision differs, so use the simulation as a worst-case check.
What ΔE difference is enough between chart colors?+
About 2 ΔE is a just-noticeable difference for side-by-side patches. For thin lines, small dots or legends you generally want 10 or more so colors are identifiable at a glance, which is why the tool flags anything under that.