gotalt?

Color blindness simulator

A color blindness simulator shows how an image or a pair of colors may look to people with color vision deficiency. Load an image or enter two colors to see them with protan, deutan or tritan color vision, using the published Machado 2009 model, plus a lightness-only view for achromatopsia.

Published . Last reviewed .

Free · No signup · Runs entirely in your browser. Your image and your colors are never uploaded.

Simulate an image

Use a screenshot of a page, a chart, a map or a design exported as an image.

Drop an image here

or press Enter to choose a file, or paste an image from your clipboard (Ctrl+V or ⌘V)

PNG, JPEG, WebP, GIF or AVIF. Images over 4 megapixels are scaled down to 4 megapixels; images over 50 megapixels are refused. Animated GIF and WebP files are simulated from their first frame.

Check a color pair

Enter two colors that have to mean different things, such as an error color and a success color, two lines on a chart or two areas of a map. Each card shows the pair as one type of color vision is simulated.

Hex or rgb(), for example #D32F2F.

Hex or rgb(), for example #388E3C.

The same scale as for images. Achromatopsia has no severity.

Hard to tell apart means the two simulated colors are less than 0.10 apart in Oklab, the color space CSS Color 4 uses to measure color difference. That cutoff is a GotAlt heuristic, not a WCAG rule (how we chose it). Distinct means only that the two stay further apart than that; it is not a pass. Contrast is the WCAG 2 contrast ratio between the two simulated colors, which measures lightness only. Whatever the cards say, WCAG 1.4.1 Use of Color asks that color is never the only way information is shown.

How to use it

  1. Load an image or enter two colors

    A screenshot of a page shows everything at once; the sample chart shows how the tool works before you have one. The color pair checker is quicker for two specific colors, such as an error red and a success green, and gives you a link to the pair you can share.

  2. Choose a type and a severity

    The simulator opens on deutan, the most common red-green type, at full severity, its strongest form. Check protan and tritan as well, and achromatopsia to see lightness alone, or choose All types to see the four side by side.

  3. Look for information that disappears

    Chart lines, map areas, status colors, links and form errors that can only be told apart by hue are the problem. Where two things merge, add a second cue: a text label, an icon, a pattern, an underline or a clear difference in lightness.

  4. Check contrast too

    A simulation shows which hues merge. Text and controls also need enough contrast against their background, under WCAG 1.4.3 and 1.4.11: measure flat colors with the contrast checker and text on a picture with the image contrast checker.

What each type means

In the words of the US National Eye Institute (NEI), whose types of color vision deficiency page the quotes below come from. The "-anomaly" types are milder; the "-opia" types are the full form.

Protan

A red-green type. Protanomaly "makes certain shades of red look more green and less bright". Protanopia and deuteranopia "both make someone unable to tell the difference between red and green at all."

Deutan

Also red-green, and the most common: "Deuteranomaly is the most common type of red-green color vision deficiency. It makes certain shades of green look more red."

Tritan

A blue-yellow type, less common. Tritanomaly "makes it hard to tell the difference between blue and green and between yellow and red". This simulator covers tritanomaly only, for the reason under How it works.

Achromatopsia

Seeing no color at all. The NEI calls complete color vision deficiency "monochromacy or achromatopsia" and says it is rare. Our view of it is an approximation that keeps lightness only.

How it works

The model

The simulator uses the model published by Gustavo M. Machado, Manuel M. Oliveira and Leandro A. F. Fernandes: "A Physiologically-based Model for Simulation of Color Vision Deficiency", IEEE Transactions on Visualization and Computer Graphics, volume 15, number 6 (2009), pages 1291 to 1298 (doi:10.1109/TVCG.2009.113, the authors' copy of the paper). It is based on the stage theory of color vision, in which the responses of the three kinds of cone are combined into opponent color channels, and it handles the milder anomalous types and the full dichromatic types in one model. The authors compared simulated and real color vision with the Farnsworth-Munsell 100-Hue test, in a study of 8 protan, 5 deutan and 17 typical observers, and concluded that "the proposed model provides good simulations for the color perception by individuals with color vision deficiency".

The published matrices

We use the authors' own precomputed matrices, copied exactly from Table 1 on their project page. The table gives protanomaly, deuteranomaly and tritanomaly at severities from 0.0 to 1.0 in steps of 0.1, "where 1.0 represents the highest severity or a case of dichromacy, and 0.0 represents absence of CVD". The severity sliders move in exactly those steps. The authors note that interpolating between neighboring rows is a fast approximation; we do not interpolate, so every result comes from a published matrix as it stands.

The color math

Each color is decoded from sRGB to linear light with the standard sRGB curve, the one in WCAG 2.2's definition of relative luminance; multiplied by the matrix; clamped to the range a screen can show; and encoded back to sRGB with the inverse curve from CSS Color 4. The decoding matters: the paper builds its transform by "projecting the spectral power distributions" of a display's red, green and blue, which are amounts of light, not the gamma-encoded numbers in a hex code.

Tritan and achromatopsia

The paper is explicit about two limits. It simulates tritanomaly "as an approximation" and the authors "restrain our model from trying to model tritanopia", so this tool calls its strongest tritan setting tritanomaly at severity 1.0, not tritanopia. They also "do not try to simulate monochromacy", so our achromatopsia view is our own approximation: every color becomes the gray with the same WCAG relative luminance, weighting red, green and blue light by 0.2126, 0.7152 and 0.0722 as our contrast checker does. How bright each color looks to a person with achromatopsia can differ from this.

The color pair verdict

To judge whether two simulated colors are hard to tell apart, we measure the distance between them in Oklab with deltaEOK, as CSS Color 4 defines it. CSS Color 4 gives one just-noticeable difference in Oklab as 0.02. We mark a pair hard to tell apart when the distance is under 0.10, five times that, because two colors that are only just noticeably different side by side are still easy to confuse in a chart legend or a status icon. The 0.10 cutoff is a GotAlt heuristic, not a WCAG rule: WCAG sets no figure for how different two colors must be. Its rule is 1.4.1 Use of Color: color "is not used as the only visual means of conveying information". The contrast shown on each card is the WCAG 2 ratio between the two simulated colors, computed with the same code as our contrast checker.

Your image stays on your device

The image is decoded by your browser and simulated on a canvas in this tab; there is no upload and no server doing the work. Images over 4 megapixels are scaled down to 4 megapixels first so the page stays quick, and the page says so when it happens. Transparent areas stay transparent, and the download is a PNG file made in your browser.

What this tool can't do

  • It shows a model, not a particular person's vision. Severity differs between people with the same type, and as the NEI puts it, "Everyone sees color a little differently". Use it to find colors that may merge, not to decide what someone sees.
  • The tritan setting is tritanomaly only, and achromatopsia is our approximation. Neither is a model of tritanopia or of monochromacy.
  • It simulates color vision only: not low vision, blur, cataracts or sensitivity to light.
  • It treats your image's colors as sRGB, the web's standard color space. A wide-gamut photo, such as one in Display P3, may lose its most saturated colors when the browser reads it, and your own screen's settings change what you see on both sides.
  • Images over 4 megapixels are simulated, and downloaded, at 4 megapixels. Images over 50 megapixels are refused, and a phone may run out of memory on smaller ones.
  • "Hard to tell apart" is our heuristic, and "Distinct" is not a pass. A result here is not a statement that a page meets WCAG or any law, and it isn't legal advice.
  • It can't see a live page: take a screenshot and load it here. Our accessibility bookmarklet checks live pages, but it doesn't simulate color vision; Chrome's and Firefox's developer tools can, as the FAQ below explains.

Color blindness simulator FAQ

Is this color blindness simulator accurate?

It applies the authors' published matrices exactly, in linear light as the model's derivation requires. The Machado 2009 model was checked against a small group of people with protan and deutan color vision using a standard color test, and the authors report good agreement. Tritan was not part of that test. It shows an average for each type and severity, though, and real people vary, so treat the result as a strong hint about which colors may merge, not as what a particular person sees.

Which type of color blindness is most common?

Red-green. The NEI says the most common type "makes it hard to tell the difference between red and green", and that deuteranomaly is the most common red-green type. It also says "About 1 in 12 men have color vision deficiency" and that men have a much higher risk than women (NEI, color blindness).

Does this make my design accessible?

No single check can. A simulation helps you find places where color alone carries meaning. The fix is a second cue, such as a label, an icon or a pattern, which is what WCAG 1.4.1 asks for. Contrast is a separate requirement (1.4.3 and 1.4.11), and both are a small part of WCAG.

Can I simulate a live web page?

Take a screenshot of the page and load it here. Your browser can also simulate a live page: in Chrome's developer tools, open the Rendering tab and pick an option under Emulate vision deficiencies (Chrome DevTools documentation), and Firefox's Accessibility Inspector has a Simulate menu (Firefox documentation). Our accessibility bookmarklet runs on live pages and measures the contrast of the text on screen, but it doesn't simulate color vision.

Is my image uploaded?

No. The image is decoded and simulated in this browser tab, by two script files you can read: cvd-ui.js and cvd.js. To check for yourself, open your browser's developer tools, switch to the Network tab and load an image: nothing is sent.

Why is there no tritanopia setting?

Because the model does not cover it. Its authors simulate tritanomaly as an approximation and chose not to model tritanopia, so the strongest tritan setting here is tritanomaly at severity 1.0. For the same reason, the achromatopsia view is our own lightness-only approximation rather than part of the published model.

Is a colour blindness simulator the same thing?

Yes. That is the British spelling, and the simulator is the same either way. You may also see it called a color vision deficiency simulator, after the clinical name the NEI uses.

Color is how an image looks; alt text is what it says

People who use a screen reader get your images through their alt text. GotAlt's alt text checker downloads the actual image file and compares it to the words with a vision model.

Check if my alt text is actually right

Color is one check of many

The free scan runs 16 rule-based WCAG checks on up to 3 pages of your site: missing alt text, form labels, headings, page language, link text and more. No signup.

Scan my site for free

A link from your site, newsletter or resources page helps other people find this free tool. Copy it here: