Designing for colour blindness
Tim Knowles (opens in a new tab)19 min read
If you've ever switched on a colour-blindness filter and watched some of your colours merge together, it helps to know what that filter is really showing you. Colour-blindness filters show the most severe form, which only about a quarter of colour-blind people have. So the check that works is simpler, and it's one you already know. Keep any two colours that sit side by side, or that mean different things, at least 3:1 apart in contrast, and never let colour be the only clue. In my tests, that check kept pairs apart under simulations of all three main types of colour blindness.
Try out the full range of colour blindness
Blue #3B82F6Purple #A855F7
22.9 apart: clearly different
Shown for the commonest type, a shifted green sensor.
For the curious
The simulation is Machado, Oliveira and Fernandes (2009) for deuteranomaly, applied to linear sRGB. Their published table runs from 0 to 1 in steps of 0.1; in-between positions are interpolated, as the authors instruct. The right-hand end, severity 1.0, is their 20 nm shift: deuteranopia, a missing cone, which is what filters show.
The score is CIEDE2000 (ΔE00): under 2 reads as the same colour, 10 or more as obviously different. The middle tick marks a strength, not a share of people: nobody has measured how many colour-blind people sit at each point, only that most have a shifted sensor rather than a missing one.
Why does a colour-blindness filter show you the wrong person?
Because almost every filter is set to the most severe form, and most colour-blind people don't have it. Your eye has three kinds of colour sensor, called cones. About 74% of colour-blind people still have all three cones, it's just that one of them is shifted, so its signal overlaps more with its neighbour's. Only about a quarter are missing a cone's work altogether. Those figures come from Barbur and Rodriguez-Carmona's 2017 paper, which assessed 1,363 people.
And how far that sensor shifts varies a lot. In typical vision, the red and green sensors are tuned about 28 nanometres apart on the light spectrum. In the commonest form, a shifted green sensor, that gap shrinks to somewhere around 3 to 11. Barbur's team describe a smooth range, from nearly normal colour vision all the way to none on the red-green side. Which means many people with a mild case don't even know they have one.
Filters model the far end of that range, and the people who built them said so. In 1999 Viénot, Brettel and Mollon simplified the method behind most filters, and they described their maps as simulating "the most severe cases of colour deficiency". The later model by Machado and colleagues has a strength setting, but its authors define the top of it as a missing cone. That top setting is what you see when you switch a filter on.
You can see the difference in two everyday colours. Tailwind's blue-500 and purple-500 are 22.9 apart on a standard colour-difference score, where anything under 2 counts as the same colour. At full-strength green-blindness they're 0.9 apart, so they're one colour. At half strength they're 9.2 apart, which is still different. So if you read the filter as a portrait of your users, you'll either over-correct or give up.
The filter isn't lying, though. It's accurate for people who are missing a cone, and they're real people. Think of it as a crash test rather than an everyday drive: if your design survives it, it survives everyone, and if it fails, it fails some people some of the time. Masataka Okabe and Kei Ito are both colour-blind researchers (their palette comes up further down), and they say it plainly: "colorblind proof is not the true simulation of colorblind vision." What a filter is really good for is pointing at the colours that are hard to judge.
What colour blindness really takes away
Your eye sorts colour by asking three questions. How light is it? Is it more blue or more yellow? Is it more red or more green? In the common forms of colour blindness, the first two questions still get a clear answer. It's the third one that gets a squeezed answer. In other words, colour blindness takes away one channel out of three, not colour as a whole.
Both main simulation models pass the blue-yellow signal through untouched. That's true in the model, at least. Brettel's own team point to a study where red-green colour-blind people, as a group, did a little worse on blue-yellow as well, so "largely intact" is the honest phrase, rather than "perfect". And in 2021, when Moreira, Lillo and Álvaro mapped how colour-blind people judge which colours are alike, they found just two dimensions. One for colour, one for lightness.
Lightness has one catch. For people who are green-blind, it's unchanged. But for people who are red-blind, reds look darker and greens look a little lighter, which Judd recorded back in 1948. That catch is the reason for the red-on-dark warning further down.
Every good rule of thumb follows from this. Put the difference in lightness, in blue against yellow, or in something that isn't colour at all. Lightness is the strongest of those, so it's the first thing to reach for when two colours need to stay apart. It's trickier than it looks, though, because two colours your picker calls equally light often aren't, and that's explained in Why "same brightness" colours don't look the same.
How many people are colour blind?
You've probably seen the line 1 in 12 men and 1 in 200 women. That's a European number, and the real answer depends on who your audience is. The US National Library of Medicine gives that figure for people of Northern European descent. Birch's 2012 paper on worldwide prevalence puts it at about 8% of men and 0.4% of women of European descent, whereas for Chinese and Japanese men it's between 4% and 6.5%.
Birch puts those differences down to founder events and genetic drift, rather than natural selection. In other words, chance. A population inherits whatever genes its small founding groups happened to carry. One study of Irish schoolchildren found 8.3% of boys, which fits the European figure, but 1.8% of girls, which is three and a half times the usual 1 in 200.
Elsewhere the numbers are lower. Studies of boys and men have found 4.11% in China and 2.76% in South India. Then in 2025 an analysis pooled 1.7 million children and teenagers from 56 studies in 21 countries. It found 4.38% of males, 0.64% of females and 2.59% overall, and the results varied enormously by population. So the honest reading is "it varies a lot with ancestry", not "it's really 2.6%".
You'll also see "about 300 million people worldwide". I couldn't trace that one to a paper. The three bodies most often named as its source are the National Eye Institute, the WHO and the Cleveland Clinic, and none of them publishes a colour-blindness prevalence figure at all. If your audience comes from many backgrounds, plan for a range. A few per cent of your readers is still a lot of people.
Worth knowing: colour vision also changes with health and age. In one study, 39.5% of people with type 2 diabetes and no diabetic eye disease had measurable colour-vision loss. And a study of 23,565 healthy eyes found that colour judgement starts to decline in the thirties, mostly on the blue-yellow side. I couldn't find a study comparing which group is bigger, inherited or acquired.
Three to one keeps two colours apart
You already know this number. If two colours are at least 3:1 apart in contrast, they stayed apart in every test I ran, under simulations of all three main types of colour blindness. It's in the web's accessibility standard, WCAG 2.2, as success criterion 1.4.11 Non-text Contrast, at Level AA, which asks for "a contrast ratio of at least 3:1 against adjacent color(s)". That covers interface parts, and the parts of a graphic you need in order to understand it, such as the bars or lines in a chart.
You probably check contrast between text and its background already. Now turn that same check sideways and ask whether two colours are far enough apart to be two different things. Same maths, different pair.
I tested it hard. I checked three million random colour pairs, an exhaustive check of a 32,768-colour grid and a two-million-colour sweep, and then I ran a search built to break the rule, under two published simulation methods. Held at exactly 3:1, the closest any pair came was 10.6 on the colour-difference score. That's about five times the "same colour" line of 2.
Below 3:1, though, there's no safe line, only rising risk. The search found merging pairs as high as 2.04:1. The simplest is pure red, #FF0000, on a dark green, #005E00, and their contrast is 2.02:1. To most people those two are about as different as two colours get, 69.6 apart. Under one of my two simulations of red-blindness they're 1.9 apart, which is the same colour. Under the other, they're 4.2 apart.
Going under 3:1 doesn't mean a pair fails, either. Okabe and Ito's orange and yellow sit only 1.70:1 apart and still hold up. So 3:1 is a guarantee, not a detector. If a pair passes, you're safe. If it misses, you need to look harder, or add a second clue.
I should admit one thing. WCAG contrast is worked out from lightness alone, so 3:1 between two colours really means at least "about 30 points apart on a 0 to 100 lightness scale", wearing a standard's badge. In other words, it's the old advice to vary the lightness, with a number attached and the number checked.
A side note on the greyscale test: it's a guarantee too, not a detector. Turning a design grey shows whether lightness alone carries it. That's a good question to ask, but it isn't the colour-blindness question. Across two million random pairs, the greyscale test missed 69–83% of red-green merges, and about 99% of what it flagged was fine. Pass it with room to spare, though, and you do have the lightness gap that keeps colours apart.
Why does red on a dark background need extra care?
Because red looks darker to people who are red-blind, so the contrast number you check flatters it. W3C says so itself, in the background notes to its text-contrast rule. Contrast can mostly be worked out without worrying about colour blindness, it says, with one exception: reddish colours on dark backgrounds, for people who are red-blind.
In 1944 Judd measured red-blind vision, and the US National Bureau of Standards published his results. Using Judd's figures, pure red keeps only 47.6% of its usual lightness. So #FF0000 on black is 5.25:1 for most people, but 3.02:1 for someone red-blind. That's a drop from comfortable body-text contrast to just scraping the large-text line. On white it goes the other way, and 4.00:1 becomes 7.15:1. W3C promises "an advisory technique on avoiding red on black", but I couldn't find it on the page that promises it.
The same effect bends the 3:1 rule. Of random pairs at 3:1 or more for most people, 8.38% fall below 3:1 for a red-blind viewer. The worst I found was a red, #FC143C, against a blue, #0516B1, which measures 3.02:1 and delivers 1.50:1. Those two colours still look different, because the simulation already allows for the darker red. What shrinks is your safety margin.
So keep saturated red off black and dark blue, or nudge it towards orange. Okabe and Ito's vermilion (#D55E00 in my conversion of their RGB values) loses 28% of its lightness to red-blind eyes, whereas pure red loses 52%. The wider rules for text contrast are in Can everyone actually read your design?
The pairs that actually break
You've probably been warned off red and green. But the worst pair in Tailwind's palette isn't red and green at all. It's blue-500 and purple-500. I ran the default colours of four well-known frameworks and apps through simulation, and what it shows is that pairs break when they're close in lightness, whatever their names.
| Pair | Contrast between them | Difference, typical vision | Difference, worst simulated case |
|---|---|---|---|
| Tailwind blue-500 / purple-500 | 1.08:1 | 22.9 | 0.9 |
| Material red-500 / green-500 | 1.32:1 | 69.0 | 6.0 |
| Office/Excel chart orange / green | 1.02:1 | 47.2 | 6.2 |
| Bootstrap danger / success | 1.00:1 | 67.4 | 11.7 |
| Okabe-Ito orange / yellow | 1.70:1 | 21.7 | 11.6 |
On that score, under 2 is "the same colour", and 10 or more is "obviously different". Every shipped pair that got into trouble sits at or below 1.32:1, so the 3:1 check catches all of them. Bootstrap's alert colours do survive the simulation, but at 1.00:1 they're carried by hue alone, with no lightness gap to fall back on.
Among the eleven basic colour words, green and brown came out harder to tell apart than red and green in my checks. That matches what 31 colour-blind people told Moreira, Lillo and Álvaro in 2021: brown with green, and blue with purple, were the hard pairs. On red and green they wrote: "None of these dichromats showed substantial difficulty discriminating the Red-Green pair." Paul Tol designs colour schemes, and he lands in the same place from the design side: "Contrary to popular belief, pure red and green can be distinguished." The problems he names are yellow with green, and purple with blue.
Still, treat my ranking and their study as two lines of evidence pointing the same way, not proof. My ranking shifts with a modelling choice and with the sample colours I picked. The lesson holds either way, though: it's a lightness match that makes colours merge, not the hue names. So when you pick chart colours, check the lightness gap between each pair, not just whether the names sound different. Surroundings change how any colour looks too, for everyone, and that's covered in The same colour looks different in different places.
Try out a colour pair through green-blind eyes
1.08:1. These can merge. Add lightness, or a second cue.
The previews show the most severe form of each type, the one colour-blindness filters show.
For the curious
The number is the WCAG 2.2 contrast ratio between the two colours, the one success criterion 1.4.11 asks to be at least 3:1 between neighbouring colours. It is shown rounded to two decimals; some checkers truncate instead, so they may show one hundredth less.
Red-blind, green-blind and blue-blind are protanopia, deuteranopia and tritanopia, simulated with Machado, Oliveira and Fernandes (2009) at full severity on linear sRGB. Under each preview, the words come from the CIEDE2000 score (hover for it): under 2 is one colour, 10 or more is clearly different. The slider is CIELAB lightness (L*), keeping the second colour’s hue.
Is there a palette that works for everyone?
For a small set of colours, yes. The best-known is eight colours that Masataka Okabe and Kei Ito published on a university lab page in November 2002. They're both strongly red-blind themselves. What they wanted was colours that are clear to everyone and vivid enough to name easily, and their tip for combining them is to alternate warm and cool colours.
| Name, as they print it | RGB (theirs) | Hex (my conversion) |
|---|---|---|
| Black | 0, 0, 0 | #000000 |
| Orange | 230, 159, 0 | #E69F00 |
| Sky Blue | 86, 180, 233 | #56B4E9 |
| bluish Green | 0, 158, 115 | #009E73 |
| Yellow | 240, 228, 66 | #F0E442 |
| Blue | 0, 114, 178 | #0072B2 |
| Vermilion | 213, 94, 0 | #D55E00 |
| reddish Purple | 204, 121, 167 | #CC79A7 |
They published RGB and CMYK values in an image, with no hex codes, so the hex column is my conversion, not theirs.
I tested every pair. Under simulated red- and green-blindness, no pair came closer than 11.61. And under simulated blue-blindness, the rarest type, none came closer than 10.87. That's more than they set out to do, since they designed for red-green colour blindness.
W3C's own guidance on using colour links straight to Okabe and Ito's page. Nature Methods got there more slowly. Its column on colour blindness appeared in May 2011, and then on 14 July 2023 the journal published a correction adding a missing link to Ito and Okabe's 2002 presentation. That's twelve years between the two dates.
The other well-known set is Paul Tol's, and his schemes were designed by calculation. In my tests his "muted" set held at 11.50 or more everywhere. His "bright" set dropped to 8.61 under simulated blue-blindness, on its blue and green.
The thing is, a palette like this has to stay small. Requiring every pair to stay apart for typical vision and all three types at once removes roughly 70–80% of the colours you could otherwise use, at every separation I tried. At the bar Okabe and Ito's palette meets, a set of at least 108 colours for typical vision shrinks to at least 20. Those are lower limits from a step-by-step search, so the true counts are higher, but the share lost is the finding. Once you're past a handful of colour-coded categories, colour stops doing the job on its own.
The science behind the filters
Every common filter descends from a 1997 method by Brettel, Viénot and Mollon. Its red-green anchor points rest on what Judd in 1948 called "the eight cases recorded so far", which means eight historical case reports. Its blue-yellow anchors rest on one man, colour-blind in one eye only, who could compare his two eyes directly. And the method's own check used two colour-blind people, with no blue-blind volunteer. So it's thinner than you'd assume, and the scientists said so first.
The authors were candid about the limits. They wrote that "we can never be certain of another's sensations". They also noted that there are endless other ways to reduce an image that a colour-blind viewer would see as identical. Every caution is right there in the original paper. They just haven't travelled with the filters.
Machado's 2009 model matched the confusion patterns of 13 colour-deficient people on a standard colour-sorting test. That checks which colours get confused, though, not what they look like. Then in 2014, Lillo and colleagues tested three popular filters against 10 colour-blind people, and only one of the three was accurate.
I also looked for a published study testing Okabe and Ito's palette, or the other popular ones, with colour-blind people. I couldn't find one. The palettes may well be fine, and my tests say they hold up, but so far they seem to have been checked mostly by simulation.
None of that makes filters useless. It makes them a warning light, which is exactly how Viénot's team described their own maps. So use a filter to find the pairs worth a closer look, rather than to decide what your users see.
Give colour a second clue
The safest design never relies on colour alone. WCAG's success criterion 1.4.1 Use of Color, at Level A, starts: "Color is not used as the only visual means". It applies to conveying information, showing an action, prompting a response and telling elements apart.
W3C's own worked example isn't a set of icons, either. It's a chemistry diagram, where people who can't see every colour difference can still follow the picture by "relying on the numbers". Labels, numbers, patterns, icons and direct text on a chart line all count as a second clue.
The 3:1 check and the second clue do different jobs. The 3:1 check keeps two colours from merging. The second clue makes sure nobody needs to tell them apart at all.
One more thing: the next version of WCAG hasn't settled colour blindness yet. In the WCAG 3.0 working draft of 10 September 2026, I found no successor to the use-of-colour rule. The only colour heading is about letting users adjust text colour. Colour blindness comes up once, in an editor's note under contrast: "A separate requirement may be needed" if the new contrast method doesn't cover red-green colour blindness.
What should you do differently in your next design?
There are six changes I'd make, and this is the order I'd make them in.
- Check 3:1 between neighbouring colours. In whatever contrast checker you already use, enter one colour as the text and the other as the background. The ratio it gives you is the contrast between the two colours. Do it for chart series, for status colours, and for anything that sits side by side.
- If a pair is under 3:1, change the lightness, not the hue. Make one colour clearly lighter or darker. Swapping blue for purple at the same lightness fixes nothing.
- Never let colour be the only clue. Add a label, a number, an icon or a pattern, so nobody has to tell the colours apart to get the meaning.
- Keep saturated red off black and dark blue. Push it towards orange instead, because vermilion holds its lightness far better than pure red.
- Start categories from a tested palette. Okabe and Ito's eight is a good default. Keep colour-coded categories few, and label anything beyond that.
- Use a filter as a stress test. If the design survives it, you're done. If it fails, check the pair's contrast before you redesign anything.
Frequently asked questions
Do colour blind people see in black and white?
Almost never. Total colour blindness affects roughly 1 in 30,000 people. The common forms squeeze just one of the eye's three colour channels, the red-green one, so reds, greens, browns and oranges get harder to tell apart, while lightness and the blue-yellow difference are largely unaffected. And about three-quarters of colour-blind people have a milder, shifted sensor rather than a missing one. Most see most colours, with fewer distinctions to work with.
Is there a colour palette that's safe for everyone?
For a small set of colours, yes. Okabe and Ito's eight colours, published in 2002, kept every pair clearly apart under simulations of all three main types of colour blindness. The limit is size, though. Requiring colours to stay apart for typical vision and all three types at once removes roughly 70–80% of the colours you could otherwise use. Beyond a handful of categories, add labels or patterns.
Can I use red and green at all?
Yes, if they differ clearly in lightness and something other than colour carries the meaning. The trouble isn't the two hues. It's two hues at the same lightness with nothing else to go on. Red and green that differ clearly in lightness stay distinguishable for most colour-blind people. Blue and purple at the same lightness, on the other hand, can merge completely. Check the pair is at least 3:1 apart in contrast, and add a label or icon.
If the contrast ratio passes, is it colour-blind accessible?
Not necessarily, because there are two different checks. Text contrast compares text with its background, so two colours can each pass 4.5:1 against white and still look identical to each other. The check that covers that case is WCAG's success criterion 1.4.11, which asks for 3:1 between neighbouring colours. Separately, criterion 1.4.1 says colour must never be the only way you show meaning, whatever the contrast.
How do I check my design? Can I trust a simulator?
Treat a simulator as a stress test, not a portrait. Standard filters show the most severe form, a missing colour sensor, which only about a quarter of colour-blind people have. So a design that survives the filter is safe for everyone, and one that fails it fails some people some of the time. When researchers tested three popular simulators against real colour-blind people in 2014, only one was accurate.
Can someone who is colour blind work as a designer?
Yes, and two of them made the palette the field still recommends. Masataka Okabe and Kei Ito, who are both strongly red-blind, published their eight-colour set in 2002, and W3C's own guidance on colour links to it. Numbers do the part that naming a colour by eye can't. Hex values, contrast ratios and lightness readings tell you whether two colours are far enough apart, whatever your eyes report.
For the curious
Red-blind, green-blind and blue-blind are protanopia, deuteranopia and tritanopia. People missing a cone's function are dichromats, and people with a shifted cone are anomalous trichromats. The colour-difference score is CIEDE2000 (ΔE00), with under 2 as "the same" and 10 or more as "obviously different"; what those numbers mean is in How different do two colours need to be?
My two simulation methods were Viénot 1999 and Machado 2009 (severity 1.0 is a 20 nm shift), applied to linear sRGB. They are two implementations, not independent models, because both descend from Brettel 1997 and Judd's 1948 anchors. Applying Machado to gamma-encoded values flips the green/brown versus red/green ranking. The red-blind lightness figures use Judd's 1944 protanopic luminosity function. Normalised so white equals 1, red on black gives 2.96:1, so I quote the drop, not a verdict.
The 2025 meta-analysis reports more dichromats than anomalous trichromats, which is the reverse of Barbur's split. Separating the two needs an anomaloscope, and school screening doesn't use one, so I use the meta-analysis for how many and Barbur for which kind.
Sources (18)
- J. L. Barbur and M. Rodriguez-Carmona, "Colour vision requirements in visually demanding occupations" (opens in a new tab), British Medical Bulletin 122(1), 51–77, 2017
- J. Birch, "Worldwide prevalence of red-green color deficiency" (opens in a new tab), JOSA A 29(3), 313–320, 2012 (abstract)
- Y. D. Jeong et al., "Global Prevalence of Congenital Color Vision Deficiency among Children and Adolescents, 1932–2022" (opens in a new tab), Ophthalmology 132, 2025 (abstract)
- MedlinePlus Genetics, "Color vision deficiency" (opens in a new tab), US National Library of Medicine
- S. Harrington, P. A. Davison and V. O'Dwyer, Clinical and Experimental Optometry 104, 48–55, 2021
- L. Gella et al., "SN-DREAMS II Report 3" (opens in a new tab), PLOS ONE 10(6), 2015; K. Ichikawa et al., Current Eye Research 46, 2021
- H. Brettel, F. Viénot and J. D. Mollon, "Computerized simulation of color appearance for dichromats" (opens in a new tab), JOSA A 14(10), 1997
- F. Viénot, H. Brettel and J. D. Mollon, "Digital video colourmaps for checking the legibility of displays by dichromats" (opens in a new tab), Color Research & Application 24(4), 1999
- G. M. Machado, M. M. Oliveira and L. A. F. Fernandes, "A Physiologically-based Model for Simulation of Color Vision Deficiency" (opens in a new tab), IEEE TVCG 15(6), 2009
- D. B. Judd, "Color perceptions of deuteranopic and protanopic observers" (opens in a new tab), 1948, and "Standard response functions for protanopic and deuteranopic vision" (opens in a new tab), 1944, Journal of Research of the National Bureau of Standards
- M. Alpern, K. Kitahara and D. H. Krantz, "Perception of colour in unilateral tritanopia", Journal of Physiology 335, 1983
- H. Moreira, J. Lillo and L. Álvaro, "'Red-Green' or 'Brown-Green' Dichromats?" (opens in a new tab), Frontiers in Psychology 12, 2021
- J. Lillo, L. Álvaro and H. Moreira, "An experimental method for the assessment of color simulation tools" (opens in a new tab), Journal of Vision 14(8), 2014
- M. Okabe and K. Ito, "Color Universal Design" (opens in a new tab), 20 November 2002, revised 2008
- B. Wong, "Author Correction: Points of view: Color blindness" (opens in a new tab), Nature Methods 20, 14 July 2023
- P. Tol, "Colour Schemes" (opens in a new tab), SRON/EPS/TN/09-002, issue 3.2, 18 August 2021
- W3C, WCAG 2.2 (opens in a new tab), SC 1.4.1 and SC 1.4.11; Understanding SC 1.4.1 (opens in a new tab); Understanding SC 1.4.11 (opens in a new tab); Understanding SC 1.4.3 (opens in a new tab)
- W3C, WCAG 3.0 Working Draft (opens in a new tab), 10 September 2026
Next: Do colour harmony rules actually work?
Tim Knowles
Websites, marketing strategy and AI training
Tim has worked in marketing since 2000. At Your Marketing Specialist he builds the websites, and colouriser is one of them. He is self-taught, and learns each subject in depth before he advises on it.
Each Article is written from Tim's own research, and every Figure runs on colouriser's own colour maths.
More about Tim (opens in a new tab)