Color Blindness Simulator

Share:

Preview how a color or an image may look with color vision deficiency (CVD): protan, deutan and tritan views from Machado et al. (2009), with the anomaly severity adjustable from 0.1 to 1.0, plus a greyscale view. Runs in your browser.

RT-DEV-084 · Developer Tools
Your browser is too old for this tool’s interactive features. Please update to Safari 13.1, Chrome or Edge 80, Firefox 74 or newer.

Color Blindness Simulator

🎚️ Anomaly severity

0.5

Each step is one of the matrices the authors tabulate. 1.0 is dichromacy, which they equate to anomalous trichromacy with a severity of 20 nm, so at 1.0 each -anomaly view matches its -opia view. The -opia views are always 1.0. The tritan views are marked less reliable because the published models disagree most there.

🎨 Color simulator — see how a single color appears

Normal vision —
Protanomaly · severity 0.5 —
Protanopia · severity 1.0 —
Deuteranomaly · severity 0.5 —
Deuteranopia · severity 1.0 —
Tritanomaly · severity 0.5 · less reliable —
Tritanopia · severity 1.0 · less reliable —
Greyscale (luminance only) —

🖼️ Image simulator — preview a full image

No file chosen Max 600px scale — large images auto-shrunk for performance
Normal vision
Protanomaly · severity 0.5
Protanopia · severity 1.0
Deuteranomaly · severity 0.5
Deuteranopia · severity 1.0
Tritanomaly · severity 0.5 · less reliable
Tritanopia · severity 1.0 · less reliable
Greyscale (luminance only)
📅 Research current as of 02 Oct 2026 · Sources: Machado, Oliveira & Fernandes (2009), IEEE Trans Vis Comput Graph 15(6), Table 1 matrices, applied in linear light with the IEC 61966-2-1 sRGB curve; prevalence from Mohd Tahir Ahmad & Seet (Singapore Med J, 1980), Chia et al. (2008), Kuo et al. (2023), Gao & Tian (2023), Xie et al. (2014) and Birch (2012); and WCAG 2.2 Success Criterion 1.4.1, Use of Color.
Standards, published formulas, and reference data are revised over time — check against a current authoritative source before relying on these figures.
Advertisement
After results · AD-W1Responsive · Post-tool — peak engagement

How to use the Color Blindness Simulator

Test individual colors with the swatch grid

Type a hex code (#RRGGBB or #RGB) or use the color picker. The eight swatches show that color under each view, with its simulated hex value; "clipped" means the simulated color fell outside what an sRGB screen can show and was clipped channel by channel. Check the pairs your design depends on. If an error red and a success green come out close together under deuteranopia or protanopia, color alone is not carrying the message. The sample image's red #dc2626 and green #16a34a are a CIEDE2000 difference of 72.5 apart for normal vision and 7.9 apart under this tool's deuteranopia, by our measurement.

Upload a full design to preview accessibility

The image simulator runs any uploaded image through all eight views and shows them side by side. Use it for marketing visuals, charts, heat maps, infographics, UI screenshots, brand palettes and status indicators such as a red error next to a green success. Each panel also reports what share of its pixels had to be clipped into the screen's range. Compare the original with each view: if information becomes hard or impossible to tell apart, the design fails for those users.

Set the severity, then start with the deutan views

Deutan defects were the larger group in the one study cited here that classified them: among boys found color-deficient in the Multi-Ethnic Pediatric Eye Disease Study in Southern California, 51% were deutan and 34% protan, and 32% were graded mild, 15% moderate and 41% severe (Xie et al., 2014). Mild and severe are different experiences, so move the severity slider rather than trusting one setting. On our test grid of every sRGB color in steps of 16, deuteranomaly at severity 0.1 and at 0.5 differ by a mean ΔE*ab of 17.3.

Apply accessibility fixes

If your design fails: (1) Add non-color indicators such as icons and text labels (an error gets a red X and the word "Error"). (2) Use patterns or textures in charts, so series differ by more than hue. (3) Check your palette here, including well-known colormaps such as viridis and cividis (see the FAQ). (4) Increase lightness contrast: the greyscale view shows whether two colors differ in luminance at all. (5) Test with real users: a simulation shows a model's prediction, not a particular person's sight.

Advertisement
After how-to · AD-W2Responsive

Color blindness — the design accessibility issue you can fix with one tool

How common color vision deficiency (CVD) is depends on who was screened and how. In 1980, Singapore males born in 1962 were screened with Ishihara plates at National Service registration: of 27,225 registrants, 4.430% had partial red-green defects, with Chinese at 4.547%, Malays at 4.612% and Indians at 2.676% (Mohd Tahir Ahmad & Seet, Singapore Med J, 1980). A 2008 study of 1,249 Singapore schoolchildren aged 13–15 found 5.3% of boys and 0.2% of girls color-deficient (Chia et al., Clin Exp Ophthalmol, 2008). Routine school screening in Kaohsiung, southern Taiwan, found congenital red-green CVD in 3.46% of males and 0.14% of females (Kuo et al., Int J Mol Sci, 2023), and Sichuan University's 2022 freshmen in Chengdu, 17,303 students, showed 4.11% of males and 0.16% of females (Gao & Tian, Int J Ophthalmol, 2023). A review by Birch puts red-green deficiency at about 8% of men and 0.4% of women of European descent, and 4–6.5% of men of Chinese and Japanese ethnicity (Birch, J Opt Soc Am A, 2012). These used different tests and samples, so they are not directly comparable, and none of them counts blue-yellow (tritan) defects, which Ishihara plates cannot detect. Designers still use red for "bad" and green for "good"; this simulator lets you see how such choices may come across without a color-deficient tester in the room.

The biology of color vision and how the simulation works

Color vision rests on three cone types. In the Smith & Pokorny (1975) cone fundamentals, as tabulated in 5 nm steps by the Colour & Vision Research Laboratory (CVRL), their sensitivities peak near 565 nm (L), 545 nm (M) and 440 nm (S); Stockman & Sharpe's 2° fundamentals, from the same database, peak at 570, 543 and 442 nm. Protan defects involve the L cones, deutan the M cones and tritan the S cones; an -anopia is the dichromatic form and an -anomaly the milder, anomalous trichromacy. The simulator decodes each pixel from sRGB to linear light with the IEC 61966-2-1 curve, multiplies it by a 3×3 matrix from Machado, Oliveira & Fernandes (2009) and encodes it back. The linear-light step matters: applying the same matrices to the gamma-encoded values instead shifts protanopia by a mean ΔE*ab of 10.7 on our test grid, more than the published models differ on red and green. Colors the matrix pushes outside the screen's range are clipped per channel, which can shift their hue, and the swatches and image panels say when that happened. A simulation shows a viewer with normal color vision which colors a CVD viewer may confuse; it is not a picture of what that person sees. The last view is greyscale, the luminance of linear sRGB. It is not a model of achromatopsia, in which vision relies on the rods.

Of 27,225 Singapore National Service registrants screened in 1980, 4.430% had partial red-green defects (Singapore Med J). An error state told apart from success by color alone can fail many of them.

Why "use color + something else" is the universal fix

WCAG 2.2 Success Criterion 1.4.1, Use of Color, is a Level A requirement that "color is not used as the only visual means of conveying information". It does not ban red and green; it bans relying on them alone. W3C's Understanding document gives examples such as required form fields marked only in red. Workarounds: (1) Icons: error states get red plus an X icon; success gets green plus a checkmark. (2) Text labels: a chart series gets a color plus a legend label. (3) Patterns and textures: bars use solid, striped and dotted fills as well as color. (4) Position and layout: group required fields rather than only coloring their labels red. (5) Lightness contrast: two colors that also differ in lightness stay apart in the greyscale view. The simulator tells you whether your color choices alone hold up; an accessibility audit also checks that the non-color indicators are there.

Singapore's 2030 target for government websites

In a written answer to Parliament on 12 November 2024, the Ministry of Digital Development and Information said: "The Government plans to make all high-traffic Government websites accessible by 2030", defining high-traffic as one million visits per year (MDDI). The question, from MP See Jinli Jean, asked about conformance with WCAG 2.1 at the AA level by 2030; the answer itself names no WCAG version or level. It does point to GovTech's open-source Oobee accessibility testing tool. The common design problems are the same everywhere: red-green error and success states, dashboard series told apart only by color, and finance apps that signal gains in green and losses in red. The fix is the same too: add icons or text labels alongside color, and build that into design-system components so every new feature inherits it.

Singapore screening rates, Machado's matrices and WCAG 1.4.1

01

Of 27,225 Singapore males screened at National Service registration in 1980, 4.430% had partial red-green defects: Chinese 4.547%, Malays 4.612%, Indians 2.676% (Singapore Med J, 1980).

02

In a 2008 study of 1,249 Singapore schoolchildren aged 13–15, 5.3% of boys and 0.2% of girls were color-deficient. Chinese, Malay and Indian boys had similar rates: 5.4%, 4.9% and 4.9% (Chia et al., 2008).

03

School screening in Kaohsiung found congenital red-green CVD in 3.46% of males and 0.14% of females (Kuo et al., 2023); Sichuan University's 2022 freshmen showed 4.11% and 0.16% (Gao & Tian, 2023).

04

Birch's 2012 review gives about 8% of men and 0.4% of women for European populations, and notes that the male-to-female ratio is markedly different in Europeans and Asians.

05

Ishihara plates cannot detect tritan (blue-yellow) defects, as the 1980 Singapore study states, so every Ishihara figure on this page counts red-green defects only.

06

This simulator uses Machado et al.'s Table 1 exactly as the authors print it: all ten severities of each type, to six decimals. Until October 2026 its -opia matrices were rounded to three.

07

Machado's severity is a dial from 0.1 to 1.0, and 1.0 is dichromacy, which the authors equate to anomalous trichromacy with a 20 nm severity.

08

For tritanopia, Machado's model and Brettel, Viénot & Mollon's 1997 model differ by a mean ΔE*ab of 15.9 on our test grid, and Brettel's paper notes that a tritanopic subject was not available.

09

WCAG 2.2 SC 1.4.1 (Use of Color) is Level A: color must not be the only visual means of conveying information.

10

viridis was designed for matplotlib by Stéfan van der Walt and Nathaniel Smith; cividis was published by Nuñez, Anderton & Renslow in PLOS ONE in 2018.

Frequently Asked Questions

  • It reproduces one published model faithfully, and the published models do not fully agree. The matrices are Table 1 of Machado, Oliveira & Fernandes, "A Physiologically-based Model for Simulation of Color Vision Deficiency" (IEEE TVCG, 2009), to all six decimals, applied in linear light. The -opia views use severity 1.0 and the -anomaly views the severity you set (0.5 by default, which is mid-scale, not a worst case). On our test grid of every sRGB color in steps of 16, this tool's protanopia and deuteranopia differ from Brettel, Viénot & Mollon's 1997 model by a mean ΔE*ab of 3.5–6.1, depending on the neutral point chosen. That is less than the 9–11 by which Brettel's 1997 model and Viénot's 1999 model differ from each other. Tritan is weaker; see the next question but one. Colors the matrix pushes off-screen are clipped, and the page says when. No simulator was measured here against people with CVD, so treat the output as a model's prediction.

  • It picks which of Machado et al.'s matrices the three -anomaly views use. The authors tabulate severities from 0.1 to 1.0 in steps of 0.1, where 1.0 "represents the highest severity or a case of dichromacy", and the slider moves through exactly those steps. The label on every swatch and panel shows the severity in use. The choice matters: on our test grid, deuteranomaly at 0.1 and at 0.5 differ by a mean ΔE*ab of 17.3, and at 1.0 an -anomaly view becomes its -opia view. The one study cited here that graded severity found 32% of affected boys mild, 15% moderate and 41% severe (Xie et al., 2014), so check a design at more than one setting.

  • Because the two main models disagree there. Brettel, Viénot & Mollon's paper says a tritanopic subject was not available to them, and Machado's authors chose not to model tritanopia, as the 2021 DaltonLens review quotes them. On our test grid, Machado's tritanopia differs from Brettel, Viénot & Mollon's 1997 model by a mean ΔE*ab of 15.9 (maximum 41.6), against 3.5–6.1 for red-green. On 20,000 random color pairs, Machado's tritanopia made 214 newly hard to tell apart where Brettel's made about 455, and the two sets overlap by about a third. Brettel's paper says "A tritanopic subject was not available"; its tritan anchors come from a case of unilateral acquired tritanopia. We kept Machado's tritan matrices because Brettel's model cannot be set up for an sRGB screen from the paper's own parameters without further choices. Use the tritan views as a rough guide, not a verdict.

  • The red-green views first. The Singapore, Taiwan and Sichuan screening studies above found red-green defects in 3.46–5.3% of males, and among affected boys in the Southern California study deutan cases outnumbered protan ones, 51% to 34%. So start with deuteranomaly and deuteranopia, then the protan views, at more than one severity. The tritan views are worth a look, with the caveat above. On a wide screen the swatches sit in 4 columns × 2 rows: normal, protanomaly, protanopia and deuteranomaly on top; deuteranopia, tritanomaly, tritanopia and greyscale below. On narrower screens they wrap to two columns, then one.

  • Most red-green CVD is X-linked recessive: the genes for the L and M cone pigments are on the X chromosome. Men have one X, so one affected copy is enough; women need both copies affected, so it is much rarer in women. The studies above show the gap: 5.3% of Singapore boys against 0.2% of girls, and 3.46% of males against 0.14% of females in Kaohsiung. Birch's 2012 review notes that the male-to-female ratio is markedly different in Europeans and Asians, so a European ratio should not be assumed for Asian populations.

  • A set of colors that stay distinguishable under the common deficiencies. Two widely used sequential colormaps: viridis, designed for matplotlib by Stéfan van der Walt and Nathaniel Smith (it was their "option D"; their design page shows each candidate under simulated color blindness), and cividis, from Nuñez, Anderton & Renslow, "Optimizing colormaps with consideration for color vision deficiency to enable accurate interpretation of scientific data" (PLOS ONE, 2018). The same design page shows that the older "jet" colormap is not perceptually uniform. Whatever palette you choose, paste its colors into this simulator and check the pairs that must stay apart.

  • They are worth checking, for different reasons. Screening studies say little about how common tritan defects are, because Ishihara plates cannot detect them, and this tool's tritan views are less reliable than its red-green ones. Complete loss of color vision is rare: the 1980 Singapore screening found 0.007% monochromats. The greyscale view is not a simulation of that condition. It shows luminance only, which answers a different, useful question: do two colors differ in lightness, or only in hue? That matters for greyscale printing and for screens with poor color.

  • No. All processing runs in your browser with JavaScript and the Canvas API. There is no server round trip: open DevTools → Network and you will see no outbound request when you upload an image or change a color. Your designs stay on your device, which makes the tool safe for unannounced product mockups, brand color work or any proprietary visual that should not leave your machine.

  • Images are scaled to at most 600px on the longest side, because all eight views are computed at once and would otherwise slow down weaker devices. For most accessibility checks 600px is plenty: it keeps the color information and lets you compare all eight views without scrolling. For pixel-level checks of icons or fine detail, crop the area you care about before uploading, so it is not shrunk.

  • Many. (1) Low vision, from conditions such as cataracts or macular degeneration: use high contrast, clear typography in relative units and support zoom. (2) Light sensitivity: offer a dark mode and avoid large areas of stark white. (3) Motion sensitivity: respect the prefers-reduced-motion media query and avoid parallax and auto-scrolling. (4) Blindness: screen-reader support, alt text and ARIA labels. (5) Cognitive load: plain language and predictable layouts. CVD simulation is one check among many; WCAG 2.2 covers these in detail.

Method & sources

How it computes

Each colour is decoded from sRGB to linear light (IEC 61966-2-1), multiplied by a 3×3 matrix, clipped to the screen gamut and re-encoded. Matrices: Machado, Oliveira and Fernandes (2009) Table 1, all six decimals; -opia views at severity 1.0, -anomaly views at the reader's severity (0.1 to 1.0). Tritan views are marked less reliable: they differ from Brettel et al. (1997) by a mean ΔE*ab of 15.9. Greyscale is linear-sRGB luminance (0.2126/0.7152/0.0722), not a model of achromatopsia.

What this tool implements

  • The matrices are applied in linear light (IEC 61966-2-1 decode and encode). Applying them to gamma-encoded values instead moves protanopia by a mean ΔE*ab of 10.7 on a 4,913-colour grid; the suite requires the kernel to disagree with that wrong answer.
  • Anomaly severity is the reader's choice, 0.1 to 1.0 in the authors' steps, and every label shows it. 1.0 is dichromacy, which the authors equate to anomalous trichromacy with a severity of 20 nm.
  • The tritan views are labelled less reliable: Machado's tritanopia differs from Brettel, Viénot & Mollon (1997) by a mean ΔE*ab of 15.9 (red-green: 3.5–6.1), and Brettel's paper states that a tritanopic subject was not available. The greyscale view is linear-sRGB luminance, not a model of achromatopsia.
  • Prevalence is given per population from primary screening studies (Singapore 1980 and 2008, Kaohsiung 2023, Sichuan 2023), never as a global figure; Birch (2012) is cited as a review, for European populations. Ishihara-based figures count red-green defects only.
  • WCAG 2.2 SC 1.4.1 Use of Color (Level A): colour must not be the only visual means of conveying information.

Sources

Abridged — the full review record for this tool runs longer than the list above.

Advertisement
Pre-footer · AD-W3 728 × 90