FrontPage Resources AccessFP Services AccessFP Mall Web Resources
Index About Advanced Search Home

Readability and colour

Colour use
Checklist for text readability
Example pages

"Its like putting up a green stop sign at a road intersection because it  matches the colour of a nearby building."

- Rosenfeld and Morville Information Architecture for the World Wide Web

Colour use

Colour blindness affects about 8% of the male population (the deficiency is sex linked). If you think you may be colour blind, I would suggest you look through an online version of the Ishihara colour blindness test.

Many modern computer video cards can display thousands (16 bit colour) or millions (24 bit colour) of colours. Colour is often measured in terms of the HSV model, standing for Hue, Saturation and Value:

Place in the colour spectrum, from red to violet. Hue can be measured  in terms of spectral wavelength
Saturation (or Chroma)
Measures the purity of colour. As saturation reaches zero, colours turn to shades of grey. Most natural scenes under daylight are of lowish saturation, colourful clothes and paints have become cheaply available since the development of synthetic dyes in the 19th century.
Value (or Intensity, Luminance)
Darkness of the colour - as the value approaches zero, the colours
 turn to black

If you have a painting or graphics program such as CorelDRAW or Paintshop Pro, load the program and find the colour picker tool. Select the HSV option, and play with the colour selections. Gain understanding of the interplay between the three variables.

Colour preferences can be cultural, and possibly psychological from deep evolutionary memories, but may also be drummed into us by convention (red means stop). Some guidelines are available from human computer interaction research:

Not so good12345

Some further guidelines from colour vision physiology:

Some people won't see colour, and displays vary

The Apple interface guidelines suggest that you should design computer interfaces in monochrome first, then add colour. This might be a good general principle to adopt for Web pages.

Checklist for text readability

The following checklist can be applied to pages:

Does the page use text and background colours which are well contrasted?
Good pages will use well contrasted colours, with widely differing hues and a difference in value. Good pages will tend to avoid strongly saturated colour pairs for background and text.
This text is well contrastedThis text is not so well contrastedCan you read this at all?Got a headache yet?
Does the page avoid inappropriate use of 'conventional' colours?
Any green stop signs, or red signs for go? Any use of blue text for anything other than a hyperlink? Any use of underlines for anything  other than hyperlinks? Is the TEXT IN BLOCK CAPITALS?
Do the page colours tie in with common Web conventions?
Is the colour scheme roughly standard - do violet links mean something different? Has red been used as the link colour?
Does the page work ignoring colours
Very few modern displays can work in pure two colour monochrome, but would the page work in the absence of colours or in greyscale?  Would there be enough separation of the tones? Are there symbols, differences in shape or size to differentiate the buttons and icons used?
Does the page use background images as textures?
Do the textures interfere with the text? Does the colour range of the image cause any distraction, or is it the contrast within the texture? Do you see any 'aliasing' of lines or edges in the texture with the text  of the page?
Does the page work without images?
Can you make sense of the page with no images loaded? When the page first loads, do you see the alternative text displayed, and does the page reserve space for the images before they download?
Does the page have things which blink present?
Possibly acceptable in marketing or in some kinds of educational material - mostly inappropriate.

Example Pages

The following are some example pages which run the gamut of colour use from the minimal to the heavy. Most of these pages are trying to communicate information.  

When evaluating pages with the checklist, it might be appropriate to

In MS Internet Explorer 4, you can switch off image loading by

Internet Options

Remember to check the 'Show pictures' option before finishing your session!

Back ]