Colour Blindness Simulator Widget

Let designers check a palette for colour-vision deficiency before it ships. Enter up to six hex colours to see each one as people with the three dichromacies and with no colour vision would see it, and get the pairs that become hard to tell apart.

Design Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/color-blindness-simulator" title="Colour Blindness Simulator by A2Z Tools" width="100%" height="1080" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

Each colour is first converted from sRGB to linear light by removing the sRGB gamma curve. For protanopia (missing long-wavelength cones), deuteranopia (missing medium) and tritanopia (missing short) the linear values are multiplied by the 3 x 3 matrices of Machado, Oliveira and Fernandes (2009) at severity 1.0, a physiologically based model of how the cone responses shift, then clipped to the displayable range and re-encoded. Achromatopsia is shown as the grey with the same relative luminance (0.2126 R + 0.7152 G + 0.0722 B). To flag clashes, every pair of colours is converted to CIELAB under the D65 white point and compared with the CIE 1976 colour difference, delta E. A pair is flagged when it is clearly distinct for typical vision (delta E 10 or more) but falls below 10 after simulation. Around 2.3 is a just-noticeable difference side by side; 10 is our deliberately cautious threshold for small chart marks and labels seen at a glance.

Method

  • Linear = ((c + 0.055) / 1.055)^2.4 for c > 0.04045, else c / 12.92
  • Protanopia: [0.152286 1.052583 -0.204868; 0.114503 0.786281 0.099216; -0.003882 -0.048116 1.051998] (Machado et al. 2009, severity 1.0)
  • Deuteranopia: [0.367322 0.860646 -0.227968; 0.280085 0.672501 0.047413; -0.011820 0.042940 0.968881]
  • Tritanopia: [1.255528 -0.076749 -0.178779; -0.078411 0.930809 0.147602; 0.004733 0.691367 0.303900]
  • Achromatopsia: Y = 0.2126 R + 0.7152 G + 0.0722 B (linear); clash when delta E76 < 10 after simulation and >= 10 before

Worked examples

Classic chart palette

Inputs: #D62728, #2CA02C, #1F77B4, #FF7F0E

Result: 5 pairs flagged, including red/green for deuteranopia (delta E 7.3) and green/orange for protanopia (delta E 4.8)

Typical vision separates every pair easily.

Pure red under protanopia

Inputs: #FF0000

Result: Seen as dark olive #6D5F00

Linear (1, 0, 0) x the protanopia matrix = (0.152, 0.115, 0) re-encoded to sRGB.

Limitations

  • Simulates full dichromacy only; milder anomalous trichromacy is not offered as a severity setting.
  • Matrices are applied to linear sRGB, the usual reading of the paper; some tools apply them to gamma-encoded values and show slightly different colours.
  • Checks colour pairs only; it does not test text contrast - use the colour contrast checker for that.

Where publishers use it

  • Data-visualisation blogs checking chart palettes before publishing
  • Design-system sites documenting which brand colours may be paired in status badges
  • Accessibility consultants demonstrating red-green problems in workshops
  • Map and transit designers testing line colours
  • Game-development forums checking team colours and UI indicators

Questions

How common is colour blindness?

About 1 in 12 men have a colour vision deficiency, according to the US National Eye Institute, and far fewer women; the red-green type is the most common. Complete dichromacy, as simulated here, is the severe end; many people have a milder form.

Which colour pairs cause the most trouble?

Red against green, green against orange or brown, and blue against purple for red-green deficiencies; blue against green and yellow against pink for tritanopia. In the default palette, red #D62728 and green #2CA02C fall to delta E 7.3 for deuteranopia.

What does delta E mean?

A distance between two colours in the CIELAB space. A difference of about 2.3 is just noticeable when two large patches sit side by side; the widget flags pairs below 10, a cautious level for small chart marks seen briefly.

Is this simulation exact?

No simulation shows exactly what any individual sees. Machado's model is widely used and well validated for full dichromacy; milder deficiencies see smaller shifts, and screens and lighting vary.

How do I fix a flagged pair?

Do not rely on colour alone: add text labels, patterns, shapes or icons, and make the colours differ clearly in lightness, which survives every type of colour blindness.

Sources

  1. A Physiologically-based Model for Simulation of Color Vision Deficiency (IEEE TVCG 15(6), 2009, doi:10.1109/TVCG.2009.113) - Machado, Oliveira and Fernandes, UFRGS . Table 1 pre-computed matrices; severity 1.0 rows used for protanopia, deuteranopia and tritanopia. Checked 2026-10-01.
  2. Machado, Oliveira and Fernandes (2009) - DOI record - IEEE Transactions on Visualization and Computer Graphics . The published paper. Checked 2026-10-01.
  3. Color blindness - National Eye Institute (NIH) . About 1 in 12 men have color vision deficiency; red-green is the most common type. Checked 2026-10-01.
  4. Delta E (CIE 1976) - Bruce Lindbloom . The CIE76 colour-difference formula used to flag clashes. Checked 2026-10-01.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Colour Blindness Simulator
https://a2z.tools/embed/color-blindness-simulator

Related widgets

More Design widgets →

Preview

CustomizeGet code