Colour blindness and the web

As a small child at infant school (aged around 4/5) I once painted a picture of a tree. It gained some attention. Not because its mature brush strokes and grasp of perspective belied my tender years (it really hadn’t) but because I’d managed to get my colours in a hideous muddle. Now, get a mental picture of your archetypal tree. I’m thinking a rich brown trunk and branches with fresh green leaves and maybe a few cherry red apples thrown in for good measure. Close enough? Well, rather than displaying an early attempt at artistic arrogance I’d simply painted the colours I thought I saw: green for its trunk and brown for the leaves.

Fast forward 7 or so years and you’d find me squinting at a book containing a series of single circles made up of various sizes of coloured dots – I was taking the Ishihara colour test (Figure 1). Asked if I could clearly see a number embedded in each of the circles I confidently read out the first few, but they quickly became more difficult to decipher until I had to admit defeat. After that I was told I was colour blind. ‘Thanks, do I get a sticker?’

Figure 1 - Ishihara colour test plates - can you see all the numbers? Answers below (via Wikipedia).

Colour blindness: what is it and what causes it?

Genetically inherited – or acquired through illness, accident or poisoning – colour blindness is a condition affecting approximately 8% of men and 1% of women in developed nations. The absence or altered sensitivity of one of the three cone receptors at the back of your eyes causes the individual difficulty in distinguishing certain colours from one another. While not a disability, the condition can at times be frustrating. I’m sure anyone with a form of colour blindness has fielded many a ‘what colour does this pencil look to you?’ question ad nauseam.

Blindness is perhaps a misleading description as it wrongly suggests that an individual is blind to colour – or sees things only in black and white. To say they have a colour vision deficiency seems a more apt description of the condition, so I’ll proceed with that.

What are the most common forms of the condition?

Green weakness

• Deuteranopia [doo-ter-uh-noh-pee-uh] is the absence of green sensitivity, causing confusion between red, green, blue, and purple (Figure 2). It only affects approximately 1% of males.
• Deuteranomaly [doo-ter-uh-nom-uh-lee] is a green sensitivity and the most common form of colour deficiency, affecting approximately 6% of males and 0.4% of females. Under certain lighting conditions those affected can mistake darker greens for black.

How might someone with a green weakness see an image?

Figure 2 - A representation of Deuteranopic vision (generated with Vischeck tool)

Red weakness

• Protanopia [proht-n-oh-pee-uh] is the absence of red sensitivity, resulting in confusion between red, green, brown, and some purple hues (Figure 3). It only affects approximately 1% of males.
• Protanomaly [proht-n-om-uh-lee] is a red sensitivity. Those affected will see darker reds to the extent where they can be mistaken for black. It only affects approximately 1% of males and 0.01% of females.

How might someone with a red weakness see an image?

Figure 3 - A representation of Protanopic vision (generated with Vischeck tool)

Blue weakness

• Tritanopia [trahyt-n-oh-pee-uh] is the absence of blue sensitivity, therefore blue and green hues cannot be easily differentiated (Figure 4). This condition is rare, affecting approximately less than 1% of males.
• Tritanomaly [trahyt-n-om-uh-lee] is a blue sensitivity. This condition is extremely rare, affecting approximately 0.01% of both males and females.

How might someone with a blue weakness see an image?

Figure 4 - A representation of Tritanopic vision (generated with Vischeck tool)

How much impact can the condition have on general web use?

While I cannot speak for those with more rarer forms, my colour vision deficiency (Deuteranomaly) has never once seriously impacted on my use of the web. Furthermore, I don’t believe much effort is required to ensure that even those with the most severe forms of the condition can enjoy something approaching an equal visual representation.

Consider the use of extreme hues

Be wary when using pale or dark hues in close proximity to one another. Could that shade of yellow used for highlighting table rows/columns be considered too pale against the dominant white background? Could that very dark green link colour be hidden amongst the surrounding dark grey or black text?

Be aware of the common green weakness

As green seems to be the colour associated with the most common forms of the condition it seems logical to suggest a considered approach when attempting to place it in close proximity with pale yellows, reds, and blues (Figure 5).

Figure 5 - Green is the colour associated with the most common forms of colour deficiency

Test your designs and templates

In the same way you’d test the usability of an interface or the quality of your content, testing for potential visual issues caused by a colour deficiency should also be added to your quality control list. There are some great tools out there that only take a second or two to use.

Recommended tools

• Color Oracle – Colour blindness simulator for Windows, Mac and Linux
• Vischeck – Web-based colour blindness simulator for images and web pages
• etre’s Colour Blindness Simulator – Upload and test images against different types of colour vision deficiencies

Or, better still, ask a colour blind colleague, friend, or sibling for their eyes. We won’t bite, unless of course you’re inquisitively (and with more than a hint of cheek) dangling a red…no that’s definitely green…erm…yellow…pencil.

Sources

• Colour vision deficiency, Royal National Institute of Blind People
• Can Color-Blind Users See Your Site?, Microsoft Developer Network, 9 Oct 2000
• Quick tips, We are Colorblind
• Chapter 8, Readings on Color: The science of color, Alex Byrne and David R. Hilbert, MIT Press 1997

Figure 1 answers (from left to right): 12, 6, 2, and 42. See them all? Lucky you, I can clearly see 12 and can just about make out a 2, but the rest are just a brightly coloured array of dots. Pretty, mind.

Tags: accessibility, design, usability
Categories: accessibility, visual information