Pattern 53: Use of colour
AKA: Use of color (US)

You are concerned about the site’s AESTHETICS (16) and simplicity: KISS (38).

How do you use colour effectively on a web site? How do you attract the user’s attention?

Therefore

Use as few colours as possible and reinforce semantic content with them. Use standard web colours – the priming effects will help users get to grips with your sight more quickly. Remember that many men are colour blind. Colour blindness is rare among women.

This pattern is terminal within this language. We recommend that you consult a graphic artist at some stage during the design of any commercial site.

There are many tricks that designers employ for getting a user’s attention to focus on a particular screen location, datum or message. Galitz (1981) reported that the guidelines provided in Table 53.1 proved effective. Colour is useful for gaining attention but one should be aware that the eye is not colour sensitive at the periphery. It can help in emphasizing the logical organization of a screen, facilitating subtle discrimination and improving aesthetics. Use it parsimoniously. Beware of monochrome ports; i.e. people running an application on a black and white screen that was developed on a colour one and finding that certain contrasts obscure a function. This is more of a problem with printers than screens nowadays. Beware of poor contrast combinations. Allow users to change the colour scheme and above all be consistent. Another reason for avoiding thoughtless use of colour is the very large number of people, especially men, who have some degree of colour blindness.

Table 53.1 Gaining attention

Intensity	up to 2 levels
Point size	up to 4
Founts	up to 3
Blinking	2–4 Hz
Colours	up to 5
Sound	soft tones except for emergencies
Symbols	bullets, arrows, boxes, lines

Other guidelines for using colour effectively may be stated as follows.

• Use colour parsimoniously. Use no more than twelve colours and only five for critical tasks.
• Use colour to increase information flow. Colours should relate semantically connected items. Colour changes should nearly always be used to indicate mode changes to attract attention to them.
• Take advantage of colour associations such as red/danger but beware of cultural variations (white is the colour of mourning in China). Use industry-standard associations where possible; e.g. the colour coding of electrical wiring, or red and yellow for healthy tissue in medical applications.
• Allow for human limitations. The eye is usually more sensitive to yellow and green than red or blue. The latter are therefore poor for displaying detail or small text. The luminance ratio between foreground and background should be 10:1. Embolden dark characters on light backgrounds. Use desaturated colours for backgrounds to avoid fatigue. Avoid bright colours at the display extremities to avoid flicker effects. Grey is usually best for this. Use non-complementary, contrasting colours to avoid problems for colour-blind users.
• Consider the task being performed. Typeface design matters for textual presentation. Realism matters for pictures.
• Treat colour as part of the whole interface. Be consistent. Use colour as you use menu design – as a simplifier of tasks.
• Think about how the user will cope with motion, especially when using a mouse.

It is often effective to prototype in monochrome and introduce colours later. Further, one should not clutter display. The same technique, sound or colour should indicate related items. Response times should normally be under one second. Messages should indicate significant variations. Pace-induced stress should be avoided. Novices should be allowed more time.

Tidwell’s STATUS DISPLAY pattern is related to this pattern.

Browse the language	What is Wu?	Look at an example pattern sequence	Structure of the patterns
Comment on Wu	Contributors	Return to TriReme home page	Links to related sites