CalcOpenly
English

Color blindness simulator

How a color looks with protanopia, deuteranopia or tritanopia (red, green or blue color blindness), using the Machado et al. (2009) model.

Drafted with AI writing toolsUpdated Checked examples: 4

#RRGGBB, a CSS name, rgb(), hsl() or oklch().
Try
Simulated color
#9F8F36
Simulated color: #9F8F36
Protanopia
#786D39
Tritanopia
#FE1B49
Color shift (ΔE OK)
0.188
This simulates complete loss of one cone type (severity 1.0). The milder anomalous forms, which are more common, shift colors less.

Without green-sensitive (M) cones, #E74C3C is seen roughly as #9F8F36, a shift of 0.188 in OKLab distance. Don't rely on this hue alone to carry meaning; pair it with text, shape or a lightness difference.

Original and simulated

Original
#E74C3C
Protanopia
#786D39
Deuteranopia
#9F8F36
Tritanopia
#FE1B49
How it's calculated S
  1. Linearise the sRGB channels

    (R,G,B)lin=(0.7991, 0.0723, 0.0452)(R, G, B)_{lin} = (0.7991,\ 0.0723,\ 0.0452)
  2. Apply the deuteranopia matrix

    [0.3673220.860646−0.2279680.2800850.6725010.047413−0.0118200.0429400.968881][0.79910.07230.0452]=[0.34540.27460.0374]\begin{bmatrix}0.367322 & 0.860646 & -0.227968 \\ 0.280085 & 0.672501 & 0.047413 \\ -0.011820 & 0.042940 & 0.968881\end{bmatrix}\begin{bmatrix}0.7991 \\ 0.0723 \\ 0.0452\end{bmatrix} = \begin{bmatrix}0.3454 \\ 0.2746 \\ 0.0374\end{bmatrix}

    Machado et al. severity-1.0 matrix, applied in linear RGB as colorspacious and DaltonLens do.

  3. Re-encode to sRGB

    #E74C3C→#9F8F36,ΔEOK=0.1875\text{\#E74C3C} \rightarrow \text{\#9F8F36},\quad \Delta E_{OK} = 0.1875

    Channels are clipped to 0–1 before the sRGB curve and rounded half up to 8 bits.

About the color blindness simulator

The simulator converts the color from sRGB to linear light, multiplies it by the Machado, Oliveira and Fernandes (2009) matrix for the chosen type of color vision deficiency, clips each channel to the 0–1 range and converts back to sRGB. The severity 1.0 matrices used here model complete loss of the red-sensitive (protanopia), green-sensitive (deuteranopia) or blue-sensitive (tritanopia) cones. The color shift is the straight-line distance between the original and simulated colors in OKLab.

Designers use it to check whether a color still carries its meaning for people with color vision deficiency. The default red, #E74C3C, becomes the olive #9F8F36 with deuteranopia, a shift of 0.188 in OKLab, and #786D39 with protanopia.

The milder anomalous forms, such as deuteranomaly, are more common than the complete ones and shift colors less, so the simulation shows the strongest effect. Displays and viewing conditions also change how colors look.

How color blindness simulation works

A simulator converts the color to linear RGB, multiplies it by a 3 × 3 matrix that models the missing cone type, clips the result to the 0–1 range and converts back to sRGB. With the Machado, Oliveira and Fernandes (2009) matrices, red #E74C3C becomes olive #9F8F36 for deuteranopia and #786D39 for protanopia.

The three types modeled

  • Protanopia: no long-wavelength (red-sensitive) cones.
  • Deuteranopia: no medium-wavelength (green-sensitive) cones.
  • Tritanopia: no short-wavelength (blue-sensitive) cones.

Protanopia and deuteranopia both collapse the red–green axis, so reds, oranges and greens drift toward olive and khaki. Tritanopia collapses blue–yellow instead and leaves reds largely intact: #E74C3C becomes #FE1B49.

Each type uses the severity 1.0 matrix from the authors' supplementary material, which models complete loss of the cone type. The milder anomalous forms, such as deuteranomaly, are more common and shift colors less.

Simulating #E74C3C by hand

  1. Linearize the sRGB channels: (231, 76, 60) ÷ 255, decoded with the sRGB transfer curve, gives (0.7991, 0.0723, 0.0452).
  2. Multiply by the deuteranopia matrix. Its first row gives 0.367322 × 0.7991 + 0.860646 × 0.0723 − 0.227968 × 0.0452 = 0.3454, and the other two rows give 0.2746 and 0.0374.
  3. Clip each value to 0–1 and re-encode with the sRGB curve: (0.3454, 0.2746, 0.0374) becomes (159, 143, 54), which is #9F8F36.

Order matters. Applying the matrix to the encoded 0–255 values skips the linearization and gives a different color; DaltonLens explains why the matrices act on linear RGB.

Simulated colors and OKLab shifts

ScenarioSimulated hexOKLab shift
Default#9F8F360.1875
#E74C3C protanopia#786D390.2047
#E74C3C tritanopia#FE1B490.0648
#FF0000 deuteranopia#A390000.2495
#000000 deuteranopia#0000000.0000

Default is #E74C3C with deuteranopia. The shift is the straight-line distance between the original and the simulated color in OKLab, a perceptual color space.

CSS Color 4 treats an OKLab distance of 0.02 as just noticeable, so 0.1875 is a large move. Black stays black under every matrix, because zero light multiplied by any matrix is still zero.

Check pairs, not single colors

The useful question is whether two colors with different meanings stay distinguishable. A typical error red, #E74C3C, and success green, #2ECC71, become #9F8F36 and #BAAE77 under deuteranopia: two khaki tones that differ mainly in lightness.

Pure red #FF0000 and CSS green #008000 fare the same way, becoming #A39000 and #776A18. When a pair converges like this, give it a second cue:

  • Add text, an icon or a pattern. WCAG 2.2 success criterion 1.4.1, Use of Color, requires a cue besides color for any information color conveys.
  • Make the two colors differ in lightness, which stays visible without hue.
  • Label chart series directly instead of relying on a color legend.

Simulation mistakes to avoid

  • Checking one color in isolation. A large shift for one color says nothing about whether it now matches its neighbor.
  • Treating the result as one person's view. Real vision varies with severity, display and lighting, and the model shows complete loss of one cone type.
  • Skipping linearization in your own code. Matrices applied to gamma-encoded values produce the wrong colors.
  • Testing only red–green. Blue and yellow status colors need a tritanopia check too.

Accepted colors and clipping

  • Hex, CSS names, rgb(), hsl() and oklch().
  • Alpha is ignored, so composite a transparent color over its background first.
  • Saturated colors can push simulated channels outside 0–1. Those channels are clipped, with a warning.

For text legibility, test the pair with the contrast checker. Simulation and contrast answer different questions, and a design needs both.

Worked examples

Alizarin red with deuteranopia

Color
#E74C3C
Vision type
Deuteranopia (no green cones)
Simulated color
#9F8F36
Protanopia
#786D39
Tritanopia
#FE1B49

Checked against: Separate exact decimal arithmetic script: sRGB → linear (IEC 61966-2-1), Machado 2009 severity-1.0 matrix, clamp, re-encode, round half up

Pure red with protanopia

Color
#FF0000
Vision type
Protanopia (no red cones)
Simulated color
#6D5F00

Checked against: Separate exact decimal arithmetic script: first matrix column (0.152286, 0.114503, −0.003882) re-encoded; blue clamps to 0

White is unchanged (edge)

Color
white
Vision type
Tritanopia (no blue cones)
Simulated color
#FFFFFF
Deuteranopia
#FFFFFF
Protanopia
#FFFFFF

Checked against: Each Machado matrix row sums to 1 within 1e-6, so linear (1, 1, 1) maps to itself

Blue with tritanopia

Color
#0000FF
Vision type
Tritanopia (no blue cones)
Simulated color
#006B96

Checked against: Separate exact decimal arithmetic script: third matrix column (−0.178779, 0.147602, 0.303900) re-encoded; red clamps to 0

Questions

How common is color blindness?

About 8% of men and 0.4% of women of European ancestry have red-green color deficiency, according to a 2012 review of population surveys by J. Birch in the Journal of the Optical Society of America A; among men of Chinese and Japanese ethnicity the figure is 4% to 6.5%. The US National Eye Institute puts it at about 1 in 12 men.

What is the difference between protanopia, deuteranopia and tritanopia?

Each is the complete loss of one type of cone. Protanopia (no red-sensitive cones) and deuteranopia (no green-sensitive cones) make red and green impossible to tell apart. Tritanopia (no blue-sensitive cones) confuses blue with green, purple with red and yellow with pink, according to the US National Eye Institute. The milder forms, protanomaly, deuteranomaly and tritanomaly, shift colors less.

What is the most common type of color blindness?

Deuteranomaly, reduced sensitivity of the green-sensitive cones that makes some greens look redder, is the most common type, according to the US National Eye Institute. Red-green deficiencies as a group are far more common than blue-yellow ones. This simulator shows deuteranopia, the complete form of the same deficiency, which is the strongest case of that confusion.

How do you make colors accessible to color-blind users?

Don't use color as the only way to convey information. WCAG 2.2 success criterion 1.4.1, Use of Color (level A), requires another visual cue such as text, a pattern or an icon, and criterion 1.4.11, Non-text Contrast (level AA), asks for a 3:1 contrast ratio between interface components or graphics and the colors next to them. Check important color pairs here under all three types.

About this calculator

[R′G′B′]lin=ΦCVD[RGB]lin\begin{bmatrix}R'\\G'\\B'\end{bmatrix}_{lin} = \Phi_{CVD} \begin{bmatrix}R\\G\\B\end{bmatrix}_{lin}

Sources

  1. Machado, Oliveira & Fernandes (2009), A Physiologically-based Model for Simulation of Color Vision Deficiency, IEEE TVCG 15(6):1291–1298
  2. Machado et al. — simulation matrices for severities 0.1 to 1.0
  3. DaltonLens — Understanding CVD simulation (matrices apply to linear RGB)

Checked against references

This calculator includes 4 worked examples with independently sourced answers. They run in the test suite, and you can run them here too.

Put this calculator on your site

Paste this where you want the calculator to appear. It is free to use, it stays in step with corrections made here, and the credit line below it links back so your readers can find the full version.

Height
Preview the embed

Keep the credit line. It is the only condition, and it is what keeps these calculators free.