Colour blindness on the Web

Colour blindness has crept back on to the agenda recently. Joe Clark recently pointed to SmartColor: Disambiguation Framework for the Colorblind, a proposed algorithm for converting colours in a document (or more likely an image) into colours that a colour blind person can distinguish. Also doing the rounds is Etre’s Colour Blindness Simulator which enables you upload images to see how they look to some colour blind users.

The thing is, colour blindness on the Web isn’t a big deal. You do have to bear it mind (as I will show later on), but there is no need to let it dominate any design decisions. I can say that confidently as someone who has been ‘diagnosed’ with strong protanomaly, a form of red-green colour blindness. In over ten years of using the Web I can list the problematic websites I have encountered on one hand.

And it’s not just me. My brother is a long-time Web user and through the miracle of genetics, he has the same form of colour blindness as I do. My brother couldn’t think of an occasion where a website caused him problems because of his colour blindness. And neither could a well known web designer with deuteranopia, another form of red-green colour blindness.

I will freely admit that is a very small sample of colour blind Web users (and it doesn’t include deuteranomaly, the most common form of colour blindness) but if a website is well designed, then potential problems for colour blind users are highly likely to get designed out, without even thinking about the impairment. This might be the reason I can’t recall many problem sites – poor overall design may have made me move on from the site before I had a chance to encounter an issue.

Wikipedia has an excellent entry on colour blindness, including this excellent description of protanomaly:

protanomalous individuals are less sensitive to red light than normal. This means that they are less able to discriminate colors, and they do not see mixed lights as having the same colors as normal observers. They also suffer from a darkening of the red end of the spectrum. This causes reds to reduce in intensity to the point where they can be mistaken for black.

It is the latter aspect of red-seeming-black that causes me most problems on the Web. The issue arises when designers specify links to be dark red but don’t underline or embolden them. This means the link is indistinguishable from the rest of the text. A perfect example is Jeff Veen’s blog. I showed this page to my brother and asked him if he had a problem seeing the links in the blog posts. “What links?” came the answer. Yes it really is that bad – the links are completely indistinguishable from the rest of the text, but it’s such as good example that I hope Jeff doesn’t change his colour scheme. Interestingly the deuteranopic person I mentioned earlier could see the links perfectly well.

So be careful with your link colours (or simply make sure they are all underlined or emboldened) but don’t get hung up about colour blindness too much. It almost goes without saying that it’s bad form to say ‘click the green button’ as that’s going to affect all visually impaired users (be they technologically or physically impaired) – again this comes down to good design.

It’s also worth mentioning the misunderstanding that colour blind people get colours the wrong way around. We don’t think grass is red or that Ferraris are green. And we don’t have problems with traffic lights (unless they are stuck in the middle of a sodium-lit junction in which case red lights are harder to pick out). What we do have problems with is distinguishing and labelling colours. For example, when I was at primary school the red crayons were stored in the same pot as the green ones and it was near-impossible to pick out the colour I wanted. It was also difficult to know what colour I wanted in the first place – I once drew my Mum’s blonde hair with green crayon and it seemed a perfect match to me. I also coloured in a plate of chips with the same green crayon – yes blonde hair is the same colour as chips, and as far as my eyes can tell both might be green.

But enough of my childhood. A more up to date example is Measure Map (I promise I’m not picking on you Jeff) which I’m fortunate enough to be alpha testing. The screen shot shows how Measure Map uses colour coding in its navigation to provide a subtle clue that you are either in the Posts area or the Links area. Logic tells me that the two colours are different, probably green and orange – I can’t tell – and because they appear almost identical I lose out on an otherwise nice piece of design. But it doesn’t really matter that much: the colour coding also includes perfectly distinguishable red and blue channels, and the application doesn’t say ‘click the green box for posts’ which would have been a disastrous design decision for many reasons. And that’s my point – good design will almost always address your colour blindness worries.

Update. In the comments, Peter Firminger pointed to the OzEmail service status page as a great example of a page that doesn’t work well for colourblind people. All the ticks (including in the key) look the same colour. And there aren’t any tool tips to help me out either. In this case better design through improved, and different, icons would have solved the issue.