Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Colour Bland: Contrast

October 01, 2003

This is the continuation of a series. View previous.

Greyscale is only one method of removing colour from an image, and as it turns out, it’s an unrealistic way of doing it. The term colour-blind is misleading - almost no one sees in literal black and white (although that’s tempting to disbelieve at times when debating).

‘Colour deficiency’ is a more descriptive label. There are two main categories of deficiencies (and a handful of rarities and sub-types):

Anomalous Trichromacy
The least severe, those afflicted are still able to sense most or all colour, but ability to distinguish between them is reduced.
Dichromacy
Less common, but more severe, dichromats have problems with reds and greens, leaving them swimming in a world of blue and yellowy brown.

Referring back to part one, you will recall that value indicates how much light a colour reflects. Blues are darker than yellows, for example (view sample images). In most cases of colourblindness, the values don’t seem to shift too radically.

Except when it comes to warm colours. Those afflcited with Protanopia (a variation of Dichromacy) see even the brightest reds as dark brown or black. This can very well mean that the viewer of a brightly-lit red stoplight would fail to notice it’s even on.

So let’s apply this to our work then. In part one we discussed the legibility of text, and how value affects the perception of individual colours. Let’s extend that and look at how using value effectively can increase contrast of text and background colour, keeping in mind that there will be some who won’t be able to view our work with a set of eyes similar to ours.

We can start with the basic principles: black on white offers the most contrast, so blue or purple on white is a step down. However, blue and purple both have darker values than, say, orange or yellow, so they offer an intermediate point between full contrast and little to none.

figure 2.1 - value and contrast, foreground

Conversely, black text on a yellow or orange background is only a step down from black text on white. Black on blue can be quite near impossible to read.

figure 2.2 - value and contrast, background

This applies to saturated colours. The following figure shows instances of orange text on white and black text on purple that actually offer enough contrast for most users:

figure 2.3 - workable value

Of course, the preceding examples have assumed full colour capabilities. But they’ve also carefully managed to avoid colour combinations that present major problems. The most common trouble spots are red and green, so what of them?

figure 2.4 - red and green

There are two directions these could go. The colourblind viewer might see these with a brightness shift, or without a brightness shift. Both instances can potentially occur, and the results may be different depending on which type of colour deficiency the viewer suffers:

figure 2.5 - possible brightness shifts

It’s tempting to think that, because you’re designing for a screen, the light emitted will be enough to prevent the dark variants from occuring. That is to say, even if a viewer can’t see the hue, they can still see light, and so would be more inclined to see variant A over variant B. That’s not the case however. Consider the red stop light example from earlier. Red is dark for some, whether it’s flat colour on a printed surface, or bright red light.

So the only hard and fast rule here is that there are no hard and fast rules. You can’t reliably predict what the end user will view when using problem colours like red or green.

The safest way to ensure your message gets across is, unsurprisingly, by following the WCAG guideline on the matter:

Ensure that text and graphics are understandable when viewed without color.

If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.

There is one small grey area, ironically. If you use a blue link within a field of black text, you are excluding almost nobody. The types of vision that can’t see blue are incredibly rare, and those afflicted have trouble viewing a computer monitor anyway.

Further Reading:

Causes of Colors — Almost everything you could possibly need to know about colour.


Reader Comments

October 01, 08h

Your first article on colour scales reminded me of hue exercises in art school. I still use one of the tricks I learned to examine colour contrasts for my web designs. Print the design in colour, then photocopy it. If it all goes black, flat gray, or bleaches out, chances are some people will have a problem viewing it.

Good articles Dave.

Sincerely, JR Prospal

Michael says:
October 02, 01h

I think Joe can be a little spiky, too, when he wants to be. :-)

http://fawny.org/blog/2003/08/#cute-Jason-Kottke-indulged-again-h1

OT, slightly, Oliver Sacks has fascinating book on an “island of the colourblind”:

http://www.oliversacks.com/bookpages/island/islandfrm.htm

Eric says:
October 02, 09h

Thank you for all this effort Dave. For some reason when people talk about accessibility they only think of screen readers and other extreme cases. The number of people that have trouble with contrast or colors dwarfs the number that use an SR, and I’m glad you are drawing attention to them. I am forever haunted by one of my best friend’s received an F in 4th grade, all because the test asked to map color-coded countries of Europe to the legend. His relatively severe red/green color blindness (he can’t tell the difference between red and green traffic lights), made distinguishing the various hues utterly impossible.

Weak eyesight and color blindness are the two main reasons I cite when I state that Flash has made ZERO real accessibility improvements. You still can’t pause movies, you can’t change the font size, and you can’t change the color palette, these things are all left to the designer, and most budgets don’t allow for such things.

Adam says:
October 16, 12h

Thanks Dave, colour-blindness is something a whole lot of people are trying to grasp how to design for. It sits squarely in that grey area between users with screen-reader dependence and users with full vision.

darkcryst says:
February 02, 12h

Relating to the Flash comment above.. Flash wasn’t supposed to make any improvments.

Its an animation tool, one that happens to be used by bad designers when they want something shiny to catch the usual users inner magpie.

The problem lies not with the tool, but how its used.

6
Pat Rees says:
May 14, 11h

There is one more area to consider when choosing color and designing for the visually impaired. My office mate uses ZoomText and I was amazed to notice when testing that some text & background combinations broke up and become unreadable when Zoomed. One of her visually impaired students refused to use ZoomText to view the web because he felt most sites’ text broke up when he Zoomed up to 7 or 8 magnification.

It seems extreme contrast is often as bad as low contrast in this situation. In playing around we found that a very slightly off-white background or a slightly grayed black on pure white background worked the best. Most of the darker colors worked fine on pure white.

Great information here. Thanks