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:
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.