What do you do at traffic lights?

An Ishihara or color-dot test, commonly used to test for colour vision deficiency

I’ve been colour blind my whole life and I’m not alone (technically I have a colour vision deficiency). Over the years I’ve discovered there is a lot of misconception around my visual impairment. That’s understandable as it can be difficult for people like me to explain and there are a number of contributory factors.

I’ve created this guide to try and explain as best I can how to allow for colour blindness in your websites and others documents. It’s not a set of rules, just some guidance. If you want to convey some data and use colours, and I don’t blame you for that, this might give some pointers on how to allow for those of us who don’t see colours consistently.

The title comes from a question I am frequently asked when I tell people I am colour blind. For the record, I can tell the difference between red and green traffic lights by their position but I am yet to mix up a red and green light in my 30+ years of driving.

I did once tell a very persistent person that colour blind people have a special driving licence which lets us go through any traffic light but, rest assured, that is not true.

To be fair, my particular version of colour vision deficiency makes it easier for me to distinguish between traffic light colours than others. My cousin has a different type and he does struggle with the colour of traffic lights although he can still tell which is which by their position.


Licensing and reuse

Creative Commons By-SA badge Before we go any further, let’s get the legal stuff out of the way. Like everything on this site, this page is covered by a Creative Commons Attribution Share-Alike License. That means you can reuse it with particular requirements. You must attribute it to me. You may not claim this as your own. You may not restrict what others can do with it or with any work you base upon it. When in doubt, ask.

See legal page for full details.


Now on with the guide

General things to be aware of

There are no fixed rules in allowing for colour blindness but here are some things to remember:-

  • “Colour blind” does not mean I can’t see colours. It means I cannot distinguish between them with any great consistency. That’s why many prefer the term Colour Vision Deficiency (or CVD) but that is less well known.
  • The surroundings and lighting are important. In one lighting arrangement I can tell two colours apart, in another I may well confuse them. That’s why Ishihara tests like the ones below are good for detecting types of colour blindness.
  • Knowing which colour is which won’t help me, so even if I can tell the colours apart (and I can’t always) it doesn’t mean I can see the numbers or shapes. I probably couldn’t tell you the colours in the right hand pattern with any accuracy, but I can see it’s a 6.
  • This is why I’m afraid I can’t give you a definitive list of colours to avoid. The whole thing exists in a world of “it depends”. The other reason is that if I did list a lot of colours to avoid I could end up giving myself (and any colourblind colleagues who read this) a headache from just looking at them.
  • Making inclusive colour choices doesn’t only affect the colour blind. It also aids those with other forms of visual difficulties or impairment.
  • Even if a colour is part of an “approved” set of colours or meets “accessibility standards”, it doesn’t always make it easy for people like me to read or look at.
  • Colour blind people are generally used to the fact that it’s not easy to understand if you don’t have it. If we do ask you to change something, though, it’s because we have a genuine reason, so please don’t read too much emotion into any request.
  • It’s a minefield, I know, and nobody wishes it wasn’t so more than I do. I know that it’s not always easy to know if you’ve just made matters better or worse. The problem is that it’s hard for colour blind folk to engage if the message depends heavily on colour.

Ishihara tests

Ishihara tests are often used to help professionals determine the type and level of colour vision deficiency a person may have. Anyone who has been diagnosed with colour vision deficiency will recognise these types of tests. When I was a boy and being diagnosed, my mother struggled to believe it wasn’t just me playing jokes when I said I could see some but nopt others.

An ishihara test
I can’t see anything except dots of different colours. I can see some different coloured dots in the middle but not what shape they are forming. You could trace those shapes with your finger and I still would not be able to see them.
Another Ishihara test
I can see a 6 in this one, quite clearly, probably as clearly as you can see whatever is in the pattern on the previous Ishihara test.

Everyday impact of colour blindness

The impact of colour vision deficiency varies but I have had it affect things like:

  • Playing snooker: the balls will disappear into the cushion from particular angles
  • Choosing clothing: I am forever picking up dark blue trousers instead of black
  • Electronic devices: Is that router light flashing orange or green?
  • Eating: Is that chicken is cooked properly or are those bananas ripe?

Two photos of a bunch of bananas. The first shows it with normal vision, the second with my colour vision

These both look identical to me

There are ways where it doesn’t affect me but you might think it does.

  • Art: I love to paint and create. I don’t find that colours make too much difference to that.
  • Career: there are certain career paths that are not available (e.g. the military or electronics) but many are available
  • Traffic lights: Nope I can see those fine (see above)

Specific guidance and tips

WARNING This section will deliberately break Accessibility guidelines on colour and contrast. It is to show the effect on people like of the colour choices you make. I apologise to my fellow colour vision deficiency sufferers if this gives you a headache. You may skip this bit if you want to (you’ll know all this stuff anyway).

Contrast, luminescence and proximity are important

Colour blindness is rarely just about which colour something is, but which colours are around it. For those of us with colour impairments the difference means more eye strain and this causes headaches. Here’s an example you will often find in spreadsheets due to conditional formatting (although to be fair the default colours in Google sheets are pretty good).

It’s worth noting that the text colour is the same in the adjacent panels below but the background is not.

This hurts my eyes if I look at it too long This is much easier to read
So does this. Even more so due to the proximity of the one above This is also easier and the proximity of the box above doesn’t make this worse

In some cases it’s almost impossible for me to see the text at all. This is probably a rare case but here is one I’ve seen in the past and is a good example of that.

This text is almost invisible to me due to the background colour This text is the same colour but I can see it and read it.
I am told this text may be difficult for you to read. If it is, this is similar to the experience I have with the text above left. For what it’s worth, I can only see a yellowish blur in this box. I had to test the formatting with it in greyscale.

Dark colours are also a bad thing for me. If you use say a dark blue and a mid-dark grey to represent different things, I may struggle to see which is which unless they are right next to each other.

Avoid very bright/luminescent colours

It’s best to avoid any colour which has 100% of at least two colours in RGB and a very low percentage of the others unless the contrast is good.

If you are a designer, it’s important to note that 255,0,0 (or #FF0000, bright red), and 0,255,0 (#00FF00, bright green) are very hard for me to read, regardless of the background. Similarly 255,0,255 (#FF00FF, bright purple/pink) is equally hard, whereas 255,255,0 (#FFFF00, yellow) can be impossible for me to see on a light background.

Try bringing the brightest colour down or the other colours up a bit. So instead of 0,255,0 (#00FF00, green) you could try 0,88,0 (#008800) instead. Still green, but more inclusive.

Try to avoid using colour as the only indicator of status

This may seem obvious, but it is an important one. Leading on from the above, you can see that using colour as the only status indicator can, and will, definitely lead to me mixing them up. This is why I am not allowed to become an electrician or a pilot.

You’ll notice that the links on this page have underlines as well as colour. A simple thing like that makes it a lot easier for me to engage with a web page. If you are wondering why some letters are not underlined, for example those that go below the baseline, like a g, p or y. I’ve done that to help those with dyslexia.

Here’s another example. To my eyes, every word in the next sentence has a very similar colour. So I can’t tell the bit that is being highlighted.

The quick brown fox jumps over the lazy dog

Whereas in this one I can easily tell which word needs my attention. So can you but for different reasons. Your eye will more likely be drawn to the colour, but mine is drawn to the bold text.

The quick brown fox jumps over the lazy dog

Ironically, when I check this page for accessibility, the entirety of both “quick brown fox” lines above fails due to low contrast. Here’s an example with better contrast but still difficult for me to see the first highlight.

The quick brown fox jumps over the lazy dog

Doing it well

Trello (the kanban app) is a really good example of this being done well. It uses colours for labels, but you can enable colour blind mode which also adds shapes to the left edge and thus makes them easier to distinguish.

Here’s what I mean. In the image, the colours of “Team”, “Personal” and “Dept/Stream/Company” are close enough for me to sometimes get them mixed up. With the addition of the shapes that becomes much harder to do and thus easier for me to use - and it doesn’t really interfere with your view either.

Screenshot of a trello label dialog. The labels have different colours but also have shapes icons to differentiate them

I know it looks drab

I know that allowing for colour blindness can end up making things look a bit drab. At least I’m told that. To be honest I can’t tell really as, for me, it can be a choice between keep-reading and close-the-page-quick.

I’m not saying you should do your personal fan-page website or corporate document in greyscale (although you should already be looking at the W3C accessibility guidelines). I’m just saying if you want me and those like me to engage, you may need to consider if we can even see what you mean.

Happy to help if you need it

Most of the time, people like me can cope with colours by using things like browser plugins and adjusting our monitor so don’t sweat it too much.

That said, if you are really unsure whether what you are about to publish will hinder rather than help colour blind people, I am happy to advise or help if I can. Reach out to me by email at ryan@domain-of-this-website. I don’t charge for small stuff but for bigger things we might need to negotiate.

Facts about colour-blindness

  • 1 in 12 of people born with XY chromosomes and 1 in 200 born with XX chromosomes in the world have some form of colour blindness. I have the most common, usually known as “red/green” or more officially as “deuteranomaly”.
  • Being colour blind does not mean I cannot see any or even particular colours. It’s about not being able to consistently detect colours. So much so that for some colours and combinations my eyes struggle to focus and this ends up causing eye strain and headaches. I actually fainted once because somebody in front of me wore a red and green striped shirt. My eyes were continually trying to focus on the stripes and it created a kind of vertigo. This is an extremely rare thing though.
  • It is caused by a faulty chromosome which affects the cones in the back of the eye which are used to detect colours. My red/green colour blindness is the result of a faulty X-chromosome. This is why red-green colour blindness is more prevalent in those of use born with XY chromosomes. My mum gave me the dodgy X-chromosome and it’s the only X-chromosome I have so I am colour blind. My son got his from his mum and neither are colour blind. My daughter has both my dodgy one and her mum’s one. My daughter is thus not colour blind because she has a functioning X-chromosome to use. However she has a 50-50 chance of passing my colour blindness onto any children she may have who are born with one X chromosome. For someone born with two X chromosomes to be red/green colour blind requires them to be the child of two colour blind people, hence it is less likely.
  • I have had it since birth but didn’t know until I was tested at about 8 years old. This is a similar experience to most other colour blind people I know. I am told you can develop it later but I am really not sure how that happens.
  • It cannot, yet, be cured. Whilst I am sure one day it could be dealt with, there are bigger and more important chromosomal conditions that would and should benefit from such research ahead of colour-blindness. You may have seen some magic glasses with various claims but I have yet to hear of a genuine independent test that confirms they work, although there is this one that shows they don’t work as advertised. Quite frankly I have better stuff I could spend £300 on.

Further reading

If you want to know more about colour blindness and accessibility/inclusivity, here are some links that may help.

About this guide and the author

This guide was written from various guides I have written for colleagues in many jobs. It uses personal experience and public resources. Everything in here is correct according to my own experience. You should not take anything I write here as medical advice or expertise.