¶ 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 a 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 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 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.
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.
Comments
1
Thanks for the example. I was diagnosed using the color tests but honestly couldn’t ever remember a situation when I had noticed any effect on my life, beyond my girlfriend noticing my inability to label colours like mauve or lilac or lavender, but I suspect that’s a different more gender-based problem. Now that I think about it, I do occasionally wave the mouse over text looking for the link that I know should be there. So other people see the link text as a different colour, ... interesting!
2
The only problem with colour on the web that I can remember is some of the links on Del.icio.us. The ones that say how may people have linked to a page. Sometimes the link text is indistinguishable from the background colour!
I once coloured a tree trunk purple! Looked ok to me.
3
Great post. I am not colour blind, but I do some accessibility work and have been telling clients that contrast rather than colour is the key. If I have any doubts about an image, I greyscale it and see if the contrast between elements stands up without the hue. Colour blindness simulation tools seem like overkill.
4
That’s true. But it is a design decision that is the problem – everyone will have the same difficulty here as the issue is caused by a lack of contrast rather than a colour issue per se.
Certainly if your image passes this test you wouldn’t have a problem, however I would say that some images might fail the test but not actually cause problems to colour blind people. (They might cause problems to other people though.)
5
I’m inclined to agree that colour blindness isn’t that big a deal when it comes to web design. I’m not color blind myself (though looking at my current design one might think so). No, the reason I agree is that a couple years ago I integrated a nifty little photoshop filter into my design process that simulates the various forms of color blindness. And I have not yet had to alter a design because of it. The filter I’ve been using can be found here: http://www.vischeck.com/
On a side note, running the photoshop filter on a screenshot of this very site produces almost zero change. Not too surprising if you think about it.
There’s also another colour tool worth mentioning (windows only, sorry). The W3C has a couple colour visibility algorithms (both brightness and difference) and there’s a little widget that makes evaluating your contrast level really easy: Colour Contrast Analyser 1.0
6
Forget childhood, a few years ago at about the age of 32, I made a green sun in photoshop. I was a bit too hasty in choosing from the palette and 00ff00 (bright green) looks identical to ffff00 (yellow) to me. One of my coworkers walked up behind me and said, “Why is the sun green?” I checked the color in the info palette and sure enough, it was green. From that point on he became my color-check guy and I also became much more diligent about checking the numbers when building color.
7
Nice post. Good to touch upon important topics as this once in a while to keep it in people’s minds.
I have a question. I use the Web Accessibility Toolbar (http://www.nils.org.au/ais/web/resources/toolbar/index.html to test my work. In your opinion does this tool do a good job at simulating the color blind experience?
8
A helpful simulation tool for OS X based web-developers is Sim Daltonism by Michel Fortin.
9
Amen.
Of course, if you follow the simple “underline links” heuristics, there is no problem in distinguishing links from regular text. It is highly recommended to underline links at least within content sections, not only to address color blindness, since that’s a general usability issue.
10
I am a graphic designer, tested positive for red green colorblindness, and I havent noticed any effect on my work. Most people are shocked to hear that I am actually colorblind.
The only time it left me at a disadvantge was when I was employed to install phone systems. Tthe colored wires, especially the purple/slate ones, were a bit difficlut but I even then, people were suprised that I could do the work I did being colorblind.
It makes more sense to focus on the usability and contrast of websites?
I am hoping this is just a phase, and that no one takes colorblindness to be a serious issue with web design, or any design for that mater…
11
The classic site I use as a bad example is http://homesite.service.ozemail.com.au/sidenav.html/help/systemstatus
Look at the key at the bottom. To me (colour-blind), all the ticks mean that the service has no problems as the colours are pretty much the same. I guess they don’t want a bunch of Xs in there making their service look bad.
Really bad use of colour and iconography, they have been told and 3 years later still haven’t addressed it.
12
I too can’t tell the difference between those colours.
I have to say that I don’t really look at my colourblindness as much except a small hurdle as a designer. Theres usually people on that know what colour I want, I hand them the hex im using if im unsure and they’ll tell me yes or no. Simple as that.
13
great write up. i work for large tech company as the CSS/html overlord and 508 is a big part of the code/designs i work on.
i would agree with others that contrast is definitely key and underlined links make things dead simple, but for times when you can’t use underlined links the vischeck filters are great.
i found that making a middle value link to offset it from the black text was not as easy as i thought it would be, given the brand colors i had to choose from. i was suprised to find that (according to the vischeck filters) some forms of colorblindness really seemed to lose some of the contrast of the bluish link i was using. some forms seemed to push it darker, some lighter. in then end i found a good color by fudging the brand blue to a slightly different hue.
14
It’s good that you helped clarify that. I’m not actually color blind but I would have a huge testing group if I needed one. My maternal grandmother is actually color blind, less common in women, so the gene is dominant in my family. Everyone in my generation except me is color blind including my female cousin. Sadly I didn’t have the same luck with the genes for going bald… I need medication to stop that.
In any event, it’s nice to know that common sense solves this problem.
15
Are you serious? I can hardly read your blog as the contrast is so extremely low.
I’m colour blind myself (well, only with some colours) and I don’t normally think it’s a big deal.
But lack of contrast is.
16
Jacob – I don’t think colour blindness issues can be addressed with common sense – there’s more to it than that – but most issues can be addressed with good design.
Biggi – you’re right about contrast being more of an issue than colours per se, which is why I’m extremely surprised that you find that contrast on Clagnut to be too low. In over 3 years of using this design it’s the first time I’ve heard that complaint.
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.