Colour Me Usable!

Colour in interfaces can cause more problems than it solves. Interface designers must treat colour with caution for a variety of reasons - most importantly the huge variety of ways in which any given colour can be perceived.

Colour is used in interface design for a variety of purposes. Not only can colour convey meaning or highlight content, it is also an important part of corporate identity and branding. Where would the Coca Cola brand be without its distinctive red and white livery?

All well and good, but the reality is that the use of colour can cause more problems than it solves. Interface designers must treat colour with caution for a variety of reasons - most importantly the huge variety of ways in which any given colour can be perceived.

It is well known that older users and those with colour-deficit vision may have difficulty in perceiving certain colours. Different monitors may be poor at maintaining colours the same across displays, and of course many users are still working on black and white displays. In this environment, poor use of colour may mean that text is hard to read, eyestrain occurs, and users become frustrated. With this in mind, designers should consider the following guidelines relating to the use of colour in interface design:

Usable without Colour

The ability to interpret colour should not be needed to navigate or use the information available on an interface. Provision should be made for those using black and white screens and those who experience colour blindness. For example, an individual with deuteranopia sees both reds and greens as a similar brownish colour and may be unable to distinguish interface elements differentiated only in this way. Fortunately, tools such as Vischeck exist that allow designers to see images and web pages as they appear to those with colour blindness.

Designers should use textured areas instead of colours alone when representing information on graphs and charts. Instructive alt text will also help where the user is unable to discern images or icons used on a web page.

Avoid Excessive Use of Colour

It is better to limit a design to about six consistently applied colours - it is difficult for the typical user to remember and distinguish between large numbers of colours. Elaborate and over-colourful design may strain the eyes and only serve to distract the user from the task in hand. Users may also find large, highly saturated areas of colours tiring and annoying.

Group and Highlight

Colour can be used effectively to break information into chunks and to highlight certain information for attention. Elements are seen by users as belonging together if, for example, the look alike with respect to, or are enclosed by an area of, colour. Perception of colour is speedy and effortless whereas reading text and attaching meaning thereto is time consuming and error prone. Effective use of colour can direct user's eyeball to specific aspects of a web page.

Readability

Readability is determined not only by the colour of text and background but also by the font used, font size, letter spacing, computer pixel size and case of text used. Study has shown that black text on a white background scores highest in readability testing. In general the darker the text and the lighter the background the better. Jakob Nielsen suggests that backgrounds work better as muted pastels or light greys. Low contrast, on the other hand, can be irritating and frustrating (or even impossible) to read.

Comply With Colour Standards

Some colours are by now firmly established as associated with certain actions or types of information: green for 'go' or 'ok', red for 'stop' or 'warning'. Designers should be extremely wary about contradicting these established norms. New technologies have brought with them new created colour conventions - such as the use of blue to indicate a hypertext link on the web. Following these 'rules' is likely to save the user time during the initial 'familiarisation' phase.