Color Blindness Simulator

Example: the Default Chart Colors of matplotlib

The first four colors of matplotlib’s default cycle (tab10, also D3’s category10) are blue #1F77B4, orange #FF7F0E, green #2CA02C and red #D62728. Paste them into Colors mode. Under protanopia the green becomes #A39119 and the orange #A59100: ΔEOK 0.006 and contrast 1.00:1, flagged Look the same. Under deuteranopia the red and green are 0.040 apart (contrast 1.17:1), flagged Hard to tell apart. A line chart with these four series needs labels on the lines or different markers, not only a legend.

Example: Status Colors in a UI Kit

The default palette of Material UI uses #2E7D32 for success, #ED6C02 for warning, #D32F2F for error and #0288D1 for info. This is the list the Colors mode opens with. Under protanopia, success and warning are 0.057 apart (1.22:1). Under achromatopsia, success and error are 0.006 apart (1.02:1): in grayscale they are the same gray. Every pair has a contrast ratio below 3:1 under all types, so the hue carries the whole message. Add an icon and a text label to each status, as WCAG 2.2 Success Criterion 1.4.1 asks.

How the Results Are Computed

Each pixel is decoded from sRGB to linear light, multiplied by a 3×3 matrix, clipped and encoded back. The matrices for the red, green and blue types come from Machado, Oliveira and Fernandes (2009), the same values as the R package colorspace with linear = TRUE. For example, #E74C3C becomes #786D39 under protanopia.

The pair check measures the distance between two simulated colors in OKLab (ΔEOK) and their WCAG contrast ratio:

• Look the same: ΔEOK below 0.02, the just-noticeable difference that CSS Color 4 uses for gamut mapping.
• Hard to tell apart: below 0.06. Szafir (2018) found that a noticeable difference for a scatterplot point was about three times larger than lab models predict, so 0.06 is three JNDs. Small marks such as points and thin lines need at least this much.
• Distinct: 0.06 or more.

The contrast ratio is shown next to ΔEOK because a pair that differs mainly in lightness stays readable in a grayscale printout too. A ratio of 3:1 is the minimum WCAG 2.2 Success Criterion 1.4.11 sets for adjacent parts of a graphic.

How Common Each Type Is

Figures from the prevalence table in Webvision (Kalloniatis and Luu), based on European populations:

Tritanomaly and the monochromacies are rare. A review in Eye (Simunovic, 2010) puts rod monochromacy and incomplete achromatopsia at 1 in 33,000 to 50,000. Rates differ by population: the Japanese Ophthalmological Society gives about 5% of men and 0.2% of women in Japan. Test the red–green types first; they cover almost everyone affected.

Compared with Chrome DevTools and Coblis

Checked on 2 October 2026:

• Chrome DevTools (Rendering → Emulate vision deficiencies, Chrome 152) has protanopia, deuteranopia, tritanopia and achromatopsia with the same Machado matrices, but no anomalous types, no severity and no export. On a Mac with a Display P3 screen, the colors read from a DevTools screenshot match the matrices applied in Display P3, not in sRGB. Green #2CA02C under tritanopia came out as rgb(32, 155, 136); this tool gives rgb(0, 155, 137). On 24 test colors the largest difference was 32 levels.
• Coblis runs in the browser and keeps the full image size, but shows one type at a time. It uses the HCIRN projection model, so #E74C3C under protanopia is rgb(143, 131, 78), lighter than the Machado result. Its anomalous types are a fixed mix (1.75 parts simulation to 1 part original), with no severity setting, and its monochromacy uses Rec. 601 luma on gamma-encoded values.

Neither tool checks a palette pair by pair.

Limits

• A simulation shows an average observer, not what one person sees. It does not replace testing with people who have color vision deficiency.
• Colors outside sRGB (for example in Display P3 photos) are clipped to sRGB before the simulation. The tool reports the share of such pixels when the browser can read the image in Display P3.
• Images above 16,777,216 pixels are scaled down. HEIC and TIFF open only in browsers that decode them (Safari).
• Severity applies to the three anomalous types in steps of 0.1. Achromatomaly has no published model; the tool uses a 50/50 mix in linear light.
• Screen capture is not available on phones; there, take a screenshot and paste or open it.
• The Colors mode checks up to 12 colors; transparency is ignored.

Related checks: text contrast in the Color Contrast Checker, new palettes in the Color Palette Generator, and exact colors from a screenshot with the color picker.