TinHat.com

home page

"Computers versus humans - it's war out there"

UK Accessibility

Sitemap

About TinHat

Contact

Privacy policy

home page
Google

Search WWW Search TinHat
Home > Usability > Colors

Colors 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 color, 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 recently heard an optician say that full 100% contrast is not the easiest for people to read, and black text on a colored 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 color, but it seems to be less of a problem on modern monitors.

Some color combinations, especially two "complementary" colors, give high contrast. Examples are gold on blue or red on green. Others give much less, for example yellow on orange. colors at opposite ends of the color circle give high contrast, and colors close together don't. The closer together your two colors 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 color 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 colors, 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 colors is mere eye-candy and serves no further purpose. But if the two colors were used for text and background, it would be a mistake.

You can check color 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 colors before printing.

The main reason why you need to be careful with luminance is because of colorblindness.

colorblindness

The most common color 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 colors 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 color of text on a particular background so it appears to be the same as text elsewhere on the page. This can make the apparent color look the same, even though the actual colors are different.

Websafe colors

There's a lot of scary nonsense written about this. Here's a quick wade through the rubbish. There are 216 colors in the websafe palette that are rendered without dithering (mixing spots of two or more colors) 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 color capability. It's only a problem on computers with 8 bit color (256 colors). On these, dithering produces a speckled effect, which can be extreme. Usually, speckling of background colors isn't much of a problem, but colored 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 colors 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 colors.

At the other end of the technology scale, some PDAs use 256 colors, 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 color level.

Hyperlinks

The default blue color for hyperlinks is universally recognised. If you use any other color 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 red/yellow/green color 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 color scheme.

Links in a navigation bar can be just about any color. The fact that they're grouped together will help your visitor recognise them as links. Keeping them underlined also helps.

Back to TinHat Usability menu

copyright Foxglove Media Ltd 2004