|
|
Colours and contrast
Most sites use black text on a white background, with hyperlinks in blue. Any departure from this formula and you risk reducing your site's usability.
If you decide to go for a different text colour, watch the contrast level. Full contrast is black text on a white background or white text on a black background. Anything else is less than 100%.
Note: I've recently heard an optician say that full 100% contrast is not the easiest for people to read, and black text on a coloured background is significantly easier. I don't have further details, but from personal experience I'd say that sounds about right. On old computer monitors that turned white into "brilliant white", I often preferred a light pastel as the background colour, but it seems to be less of a problem on modern monitors.
Some colour combinations, especially two "complementary" colours, give high contrast. Examples are gold on blue or red on green. Others give much less, for example yellow on orange. Colours at opposite ends of the colour circle give high contrast, and colours close together don't. The closer together your two colours are on the circle, the more likely you are to need large fonts and bold to assist legibility.
Luminance
You also need to be careful you don't choose colour combinations that are too close together in brightness (luminance). The navigation bar on the left offers a good (or maybe bad) example. The red background and green surround are very different colours, but their luminance is almost identical. When they're printed in monochrome they're an almost identical shade of grey. It doesn't matter in this case because the difference between the two colours is mere eye-candy and serves no further purpose. But if the two colours were used for text and background, it would be a mistake.
You can check colour combinations for luminance by capturing a page as an image and printing it in monochrome. Simply printing the HTML page won't show anything because browser software usually changes background and text colours before printing.
The main reason why you need to be careful with luminance is because of colourblindness.
Colourblindness
The most common colour blindness is weakness in green, meaning that different levels of greenness are not recognised, and so red, orange and yellow are not easily distinguished. That may sound strange, but it's because yellow is seen by the human eye as a combination of red and green. So if you can't easily distinguish green, you can't easily tell red from yellow.
The second most common is lack of red, which gives a similar problem to the one above, but with green also getting mixed up with red orange and yellow. Also there's a tendency to see red as very dark, close to black.
What this means in design terms is make sure your reds, oranges, yellows and greens have different brightnesses (luminance) if you're using one for text and one for background, and don't rely on users distinguishing dark red from black.
The colours used in the left hand navigation bar of this page are on the borderline for acceptable usability. Their saving grace is that the luminance of the yellow text is much greater than the red background, so even a colorblind person sees the contrast, even if it comes across in monochrome.
Contrast direction
Dark text on a light background is generally accepted as the easiest to read, especially in large quantities. Light text out of a dark background should be used for short text only, preferably at large font sizes or with bold. Studies of TV teletext show that light text out of a dark background is perfectly legible when the words are big enough, so there's no reason to avoid it altogether.
Dark backgrounds tend to crowd light text and give the illusion that the font size is smaller than it actually is, especially when viewed by readers with astigmatism (very common). You may need to choose a larger or bolder font than usual to combat this illusion.
Dark text is also influenced by its background. In fact all text appears to be modified by its surroundings, especially for astigmatic viewers, and the smaller the text the greater the modification. It may even be necessary to change the colour of text on a particular background so it appears to be the same as text elsewhere on the page. This can make the apparent colour look the same, even though the actual colours are different.
Websafe colours
There's a lot of scary nonsense written about this. Here's a quick wade through the rubbish. There are 216 colours in the websafe palette that are rendered without dithering (mixing spots of two or more colours) on all Macs and Windows machines. But it's no big deal because dithering works very well on any decent computer with 16, 24 or 32 bit colour capability. It's only a problem on computers with 8 bit colour (256 colours). On these, dithering produces a speckled effect, which can be extreme. Usually, speckling of background colours isn't much of a problem, but coloured text can be broken up so badly that it's barely legible.
If your site is aimed at people with low quality computers, reset your screen to 256 colours and see how your pages look. That should tell you if you have a problem with dithering, and if you need to start changing your text to websafe colours.
At the other end of the technology scale, some PDAs use 256 colours, so if your site is aimed at these high-end users, again it's a good idea to simulate their viewing experience on your screen.
The excellent stats site echoecho.com reports that around 2% of users view at the 256 colour level.
Hyperlinks
The default blue colour for hyperlinks is universally recognised. If you use any other colour there is a risk your visitors may not recognise your links. You can see this is an issue here on the TinHat site because default blue clashes with the brown/gold/green colour scheme so can't be used. Instead we use a blue that is less bright and contains more green - and lose a few usability points as a result. But then it would be a shame to get obsessive about usability and allow it to destroy an original colour scheme.
Links in a navigation bar can be just about any colour. The fact that they're grouped together will help your visitor recognise them as links. Keeping them underlined also helps.