Color blindness simulator

Try your colours

Colour blindness simulator

Number of colours 2 colours3 colours4 colours

Colour 1 · In review and link

Colour 2 · Rejected

Colour 3 · Approved

Colour 4 · Pending

Type of vision

Normal visionNo simulationProtanopiaRed-green typeDeuteranopiaRed-green typeTritanopiaBlue-yellow typeAchromatopsiaNo colours visible

Applications this week (sample data)

18

9

42

31

• In review
• Rejected
• Approved
• Pending

Status labels

• In review
• Rejected
• Approved
• Pending

Your application is in review. You can find the details on the application page.

Colour pairs (with simulated colours)

With normal vision, no pair can be confused.

• In review and RejectedDistance 0.37 · Lightness 1.03:1Distinguishable
• In review and ApprovedDistance 0.33 · Lightness 1.47:1Distinguishable
• In review and PendingDistance 0.44 · Lightness 2.40:1Distinguishable
• Rejected and ApprovedDistance 0.33 · Lightness 1.42:1Distinguishable
• Rejected and PendingDistance 0.25 · Lightness 2.33:1Distinguishable
• Approved and PendingDistance 0.26 · Lightness 1.63:1Distinguishable

In the protanopia simulation, 1 pair can be confused: Approved and Pending.

• In review and RejectedDistance 0.30 · Lightness 1.67:1Distinguishable
• In review and ApprovedDistance 0.31 · Lightness 1.32:1Distinguishable
• In review and PendingDistance 0.37 · Lightness 1.73:1Distinguishable
• Rejected and ApprovedDistance 0.19 · Lightness 2.21:1Distinguishable
• Rejected and PendingDistance 0.27 · Lightness 2.90:1Distinguishable
• Approved and PendingDistance 0.08 · Lightness 1.31:1Confusable

In the deuteranopia simulation, 1 pair can be confused: Rejected and Approved.

• In review and RejectedDistance 0.32 · Lightness 1.25:1Distinguishable
• In review and ApprovedDistance 0.31 · Lightness 1.41:1Distinguishable
• In review and PendingDistance 0.44 · Lightness 2.65:1Distinguishable
• Rejected and ApprovedDistance 0.04 · Lightness 1.12:1Confusable
• Rejected and PendingDistance 0.20 · Lightness 2.11:1Distinguishable
• Approved and PendingDistance 0.18 · Lightness 1.87:1Distinguishable

In the tritanopia simulation, 1 pair can be confused: In review and Approved.

• In review and RejectedDistance 0.34 · Lightness 1.06:1Distinguishable
• In review and ApprovedDistance 0.08 · Lightness 1.21:1Confusable
• In review and PendingDistance 0.31 · Lightness 1.87:1Distinguishable
• Rejected and ApprovedDistance 0.35 · Lightness 1.28:1Distinguishable
• Rejected and PendingDistance 0.19 · Lightness 1.98:1Distinguishable
• Approved and PendingDistance 0.29 · Lightness 1.54:1Distinguishable

In the achromatopsia simulation, 3 pairs can be confused: In review and Rejected; In review and Approved; Rejected and Approved.

• In review and RejectedDistance 0.01 · Lightness 1.03:1Confusable
• In review and ApprovedDistance 0.09 · Lightness 1.47:1Confusable
• In review and PendingDistance 0.23 · Lightness 2.41:1Distinguishable
• Rejected and ApprovedDistance 0.09 · Lightness 1.42:1Confusable
• Rejected and PendingDistance 0.22 · Lightness 2.33:1Distinguishable
• Approved and PendingDistance 0.13 · Lightness 1.63:1Distinguishable

Because JavaScript is turned off, you can’t change the colours. Choosing the type of vision and the results for the example colours still work.

Type a hex code or use the colour picker, then choose a type of vision. The values in the chart are examples. The link deliberately differs only by colour. The “Confusable” warning is a rule of this tool, not a standard.

Types of colour blindness

The US National Eye Institute (NEI) describes colour blindness as colour vision deficiency. According to Colour Blind Awareness, it affects about 1 in 12 men (8%) and 1 in 200 women. Worldwide, that is about 300 million people.

The red-green group is the most common. The NEI describes the types in the simulator like this:

Type	Group	What happens
Protanopia	Red-green	Red and green can’t be told apart at all.
Deuteranopia	Red-green	Red and green can’t be told apart at all.
Tritanopia	Blue-yellow, less common	Blue and green, purple and red, and yellow and pink can’t be told apart. Colours look less bright.
Achromatopsia (monochromacy)	Complete colour vision deficiency, rare	No colours are seen at all.

There are also mild forms of these types. According to the NEI, deuteranomaly makes certain shades of green look more red. Protanomaly makes certain shades of red look more green and less bright. Both are mild and usually don’t get in the way of normal activities.

The simulator shows the complete forms. For someone with a mild form, the loss of colour is smaller than on the screen.

How the simulator works

The simulation matrices come from the 2009 paper by Machado, Oliveira and Fernandes. This physiology-based model gives a 3×3 colour matrix for each type. I used the row for severity 1.0, that is, the complete form.

I apply the matrices to the page with the SVG filter feColorMatrix. According to the W3C Filter Effects specification, these filters work in linear RGB space (linearRGB) by default. The paper doesn’t say which encoding the colours are in. I calculate the pairs in the same space too.

The paper has no matrix for achromatopsia. I draw it by setting the saturate value of feColorMatrix to 0. This setting turns the colour fully grey; the result is an approximation.

The warning rule is my demo rule, not a standard. I calculate the distance between two simulated colours in the Oklab colour space (ΔEOK). CSS Color 4 defines this distance as the Euclidean distance in Oklab. If the distance is below 0.10, the pair is flagged as “confusable”.

Why not the contrast ratio? I tried that first. With the example colours, the ratio of red and green was 1.42:1 with normal vision and 1.12:1 with deuteranopia. The ratio changes little; what is lost is the difference in hue. Because WCAG looks at the difference in lightness, I still put the ratio in every row.

WCAG 1.4.1: colour mustn’t be the only cue

Success criterion 1.4.1 Use of Color in WCAG 2.2 is at Level A. Colour must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element.

The W3C Understanding page states the reason plainly: a difference in colour may not reach users with colour vision deficiencies. The page notes that people with partial sight and many older users don’t see colour well either.

The criterion doesn’t ban colour. It asks for a second visual cue next to the colour: text, shape or pattern. According to the W3C, a difference in lightness with a contrast ratio of at least 3:1 also counts as a visual distinction.

The parts of the simulator show typical 1.4.1 cases:

• Chart: the series differ only by colour and a legend. The W3C list of techniques says to use colour and pattern together (G111).
• Link: not underlined, only the colour is different. The W3C lists a link that can’t be recognised without colour vision as failure F73. If you don’t underline, make sure there is at least 3:1 between the link and the surrounding text (G183).
• Status labels: there is text next to the coloured dot. That is right. Marking required or invalid fields in forms only by colour, on the other hand, is failure F81.

You can also measure text contrast with the contrast checker. I cover the rest of the criterion in the WCAG guide.

How I separate confusable colours

Before the palette, start with the meaning the colour carries. If a colour carries meaning, put text next to it. Give chart series direct labels or patterns. Underline links.

Then improve the palette. Move the lightness of the two confusable colours apart: one should be dark, the other light. Change the two colours in the simulator and see whether the warning goes away.

If you highlight a single element with colour, you are relying on the von Restorff effect. If the element differs only by colour, colour-blind users may not see that difference. Add a difference in size or weight as well.

My note

If green means “good” and red “bad” in a dashboard, and both have the same lightness, you should definitely check with this tool. Choose deuteranopia with the example colours: Rejected and Approved turn into almost the same olive.

The simulator is a starting point and doesn’t replace a test with real users. But it shows the most obvious confusions before launch.

If you want one flow of your product checked from start to finish, the UX Audit also covers the basic WCAG 2.2 checks.