TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Colour Bland: Value

September 29, 2003

This is the first in a series. View next.

Today was a sick day thanks to some bad chicken wings last night, so sticking with the theme, let’s bring up the subject of colour. Yes, I said colour with a ‘U’: that’s the Canadian (and [I’m told] British) spelling of the word (those followers).

Sparked by a conversation with the ever-understated and humble Joe Clark (in the flesh, no less, due to the recent ATypI conference taking place not 15 blocks from my doorstep), and continued by a thread over at Jon Hicks’ place, what has been coming up frequently is talk about colour-blindness. Specifically that working with colour requires you consider the percentage of the population who have troubles viewing said colour.

Firstly though, run, do not walk, over to Pixy’s Colour Scheme Picker application. Bookmark it, use it, and love it in every which way possible. This is the same Pixy that brought us the wildly ingenious CSS image hovers with preload… The Czech web design scene is flourishing, so say my site’s referrers, and I can’t wait to see what else Pixy brings to light for us Anglophones. (thanks to Nick for bringing this to my attention on the Digital Web What’s New board)

Now that you’re armed, here’s what you need to know. Colour deficiencies are varied and specific to the viewer, so although Pixy and others have come up with mechanical ways to simulate the deficiencies, these can only be used as an approximation and not a final word. Additionally, converting a design to monochrome isn’t an indicator of what someone without colour abilities will view.

But there are certain truths in working with colour that can be exploited for your benefit. These are what we’re interested in.

For maximum legibility, black text on a white background is the holy grail of on-screen design. This is not to say that every single instance of every single design entails using solely black on white. In fact, to some people (especially those on LCD monitors, which have amazingly high contrast ratios to begin with) this can prove too much contrast. But the basic principle is a starting point: dark text on light background is more legible than light text on dark background, and contrast between the text and what it sits on determines how easy it is to read.

Now consider colour. If you use coloured text on a white background, you are moving away from the ideal. This in itself isn’t a problem, but ignoring deficiencies for a second, a wide range of tonal value exists within the visible spectrum. Value is a hard concept to grasp for non-designers, so first the technical description, followed by an illustration. Art Fundamentals: Theory and Practice (publisher McGraw-Hill, 1998) defines it this way:

The property of color known as value distinguishes between the lightness and darkness of colors, or the quantity of light a color reflects.

Simply put, some colours appear darker than others. Purple is a dark colour, red is middle of the road, and yellow is light. Figures 1.1 and 1.3 attempt to demonstrate the difference in value between the colours shown:

Figures 1.1 through 1.3 showing supporting colour swatches

Using this knowledge, it’s not a stretch to see how using yellow text on a white background is ridiculously low in contrast, but using purple text on white could work.

What about the person who has trouble with purple though? There are many schools of thinking on this, and no definitive answers right now. Many who have trouble viewing purple and blue see the two colours as the same; the value of the colour may persist, despite confusion over the precise hue.

But we can see that converting our work to greyscale isn’t an accurate test. Consider Figure 1.2 — the same colours shown in Figure 1.1 have been mechanically converted to monochrome, and come out an identical shade of grey. Photoshop sees the colours as being equal in value, but our eyes do not. Photoshop is value-blind, so we can’t accurately test work this way.

Note: Douglas Bowman has pointed out that other methods of converting to greyscale produce more accurate greyscale values. I’m aware of at least three different conversion methods, all of them producing different results. Keep in mind that none of these are meant to be simulations of colour-blindness either, they’re merely software algorithms to represent values. Nothing about an algorithm can simulate the human eye, they can only ever be approximations.

Continued with Colour Bland: Contrast.

More Reading:

Reader Comments

Jonathan says:
September 29, 07h

Raising the issue of colour-blindness is great. There are two URL’s that I use from time to time to help determine colour contrast issues: HP’s Color Tool http://h10014.www1.hp.com/accessibility/color_tool.html which is based on a formula from the W3C and you can also use Vischeck’s different options http://vischeck.com/showme.shtml to test for colour blindness.

Dave S. says:
September 29, 09h

Jonathan, you added the comment before I revised the post, so I’ll address the specific tools. I’ve used both, and find them to be interesting guides. They have the potential to highlight problems, but as I assert in my revision, software can’t duplicate the complexity of the human eye.

Note that I AM repeating learned knowledge here, and nothing I’ve studied in excruciating detail. But just as taste in colour palettes is unique to the viewer, so too is colour deficiency. Nobody relies on software to coordinate their furniture, so it stands to reason that the tools can only generalize, and will inevitably not cover everyone.

3
Tom Passin says:
September 29, 09h

I am partially (probably mostly) red-green color blind -although I can see _some_ reds and _some_ greens. When I get a chance, I talk to people at work designing web pages and application screens about how to help make pages readable based mainly on my personal experience.

I find these to be useful for someone like me -

1) Do not pair the difficult color pairs - red & green, or yellow & blue - to encode differences. Instead, use a color from the most common deficit - red/green - with one from one of the other most common deficits - e.g., blue/yellow. That way, at least one should be detectable by a large fraction of users.

2) Use differences in gray scale in parallel with colors to encode differences. I think up to four different gray shades are usually detectable. Treat the gray scale densities as if the colors were going to be copied on a monochrome copier - you would certainly want to make use of gray scale differences then.

3) I can often detect colors when they are bright or have a relatively large area - a thin line may be impossible to discriminate, a wide one may work acceptably.

4) Mix in colors from one pair with those of another. For example, mix yellow in with a green and blue in with a red. I realize that this advice may somewhat mess up some color schemes, but it can really help people like me. Mixed-in colors seems to be the main reason I can tell red traffic lights from green ones - they are bright and apparently do not use pure reds and greens.

5) Instead of relying on different line colors, try to use line widths to encode differences (they can still be colored). Three widths seem to me to work well and still allow a reasonable quality of design. You can combine them with different gray scale values - say two values. So between well-chosen colors, line widths, and gray scale values, you can help most people discriminate a good range of encodings.

If you follow these suggestions, I think that most people will be able to use your encodings well enough. Obviously there is no perfect solution, but the mixtures I suggest along with the difference values of gray scale provide multiple encodings, which is very helpful.

Dave S. says:
September 29, 09h

Tom (and anyone else with red-green deficiencies), if you have a moment, I’d really be curious to hear how close the results are to reality when running a sample image like this:

http://www.mezzoblue.com/i/h-main.jpg

through the Vischeck simulator:

http://www.vischeck.com/vischeck/vischeckImage.php

Right now I can’t get the latter loaded, so hopefully you’ll have better luck.

5
Tom Passin says:
September 29, 09h

Sorry, Dave, your jpg gives me a 404 right now. Why don’t you email me and we can discuss things until we have something to tell your readers?

Dave S. says:
September 29, 10h

Hmm. Something seems to have gone wrong with my MT character filters. I’ll send an e-mail, thanks Tom.

September 30, 03h

as an aside: pure black on white can also cause problems for people with dyslexia due to its high contrast. the white space can cause the visual phenomenon of “rivers” of white appearing on text passages, making it very difficult to read. so the contrast shouldn’t be too high either…

Andrew says:
September 30, 03h

(showing off knowledge in a pointless aside)

Colour is also the British spelling, but interestingly, I was once told that we brits used the (now) US spelling up until the 17th century.

September 30, 03h

I agree some dyslexics will have issues with light sensitivity and brilliant white backgrounds with black text; though being dyslexic myself one doesn’t have an issue regarding text legibility under those circumstances.

Thus black text on a white background being suitable for all webcitzens as was previously stipulated is not always an ideal goal. Hence why many sites aided at dyslexics use a pale yellow or cream background.

Rich says:
September 30, 07h

Like Tom, I too am colour deficient (so Dave, feel free to email the software test to me as well). I have strong protanomalia which means I do not see red as well as most people.

Approximately speaking, this means that to me, browns look green, purples look blue, pinks look grey and reds look black. It’s not as simple as that because I do have *some* red vision (Ferraris, for example, are red, plain and simple).

Jeff Veen’s blog (http://veen.com/jeff/) unwittingly provides an perfect example of why catering for colour deficient folks is a real problem. Jeff colours his links dark red and turns off the underlining, which for me makes the links absolutely indistinguishable from the rest of text!

A few years ago I wrote a little article on this subject. It shows a few more examples of problematic colour combinations: http://jalfrezi.com/features/Articles/colourblind.htm

One of the easiest ways to test for problems is turn down the colour on your monitor - it seems to have a different effect to grey-scaling an image comp.


Rich.

P.S. language: en-gb

September 30, 11h

Here is a site that I wrote about back in march, and it does exactly what you want. It can convert pages into specific color blind schemes so you view them. I thought it was awesome then, and I use it still.

Figured I’d add this site to the growing list of sites here.

http://colorfilter.wickline.org/

12
G in Denver says:
September 30, 12h

I have used this site to test colour combinations when designing:

http://www.internettg.org/newsletter/mar99/color_challenged_applet.html

Regards,
G in Denver

Sian says:
October 01, 03h

It was only until I took a course with IWA-HWG that I realised how awful a website could look to someone with colorblindness, and neither did I know that there were different types. I assumed that people with colorblindness only had a problem with blue’s I had no idea some could have problems with red’s and green’s.

Chris says:
October 01, 11h

Sigh. The number of times my CSS has failed, leaving me trawling through a mass of classes and attributes, only to discover I’d written “colour” and not “color”. Again, sigh.

October 06, 05h

You have three choices with a colour scheme: 1) do what you like regardless of how any others perceive the colour scheme 2) amend your colour scheme to include as many other users as possible - realising that by picking any colour scheme you may indeed be excluding somebody 3) give people alternative skins that they can apply according to their preferences/needs (can be a difficult one to get past the corporate brand police). There isn’t a simple answer, and 2) and 3) involve quite a bit of work. I like to apply the 80/20 rule loosely - this means aim for the big visual deficiencies first & then try and pick off the more obscure ones - where possible or desirable - later on. Maybe your main colour scheme should be inclusive along this 80/20 rule and then try to skin in for the other more “obscure” problems.