1.3.4 How to use colour to good effect
The effective use of colour is a complex and technical area. In Table 2 we have listed some general guidelines.
Table 2: Making effective use of colour
|Number of colours||If you are using colours to organise the screen, then it is better to limit their number: too many colours can be confusing and unpleasant to look at. Some guidelines recommend no more than six colours, in addition to black and white, for any one screen, and fewer is often better. Some experimental evidence suggests that using many colours arbitrarily can result in users suffering eyestrain, fatigue and disorientation.|
|Design for monochrome||Designing in black and white first can help to focus attention on the layout of the UI. Also, not all users may have colour screens. Do not forget that monochrome displays can be extremely effective, like the display in a railway station that indicates when the next train is about to arrive.|
|Colour perception||Colour perception varies greatly. About 8% of the male population is colour blind. Red, orange and green are often confused, as are purple, blue and magenta, and white, grey and cyan.|
|Colour for reinforcement||Colour should not be used in isolation. For example, speed limit signs on UK roads have a red border, but they also have black text on a white background stating the maximum speed.|
An important factor when you use several colours is the intrinsic brightness of each. Table 3 gives the brightness of a variety of pure colours. The brightness of mixed colours depends upon the brightness of each colour in the mixture and the relative quantities of each. For example, mixing dark blue with white results in light blue. Light blue is a brighter colour than dark blue.
Table 3: Intrinsic brightness
|Percentage||Achromatic colours||Colours||Intrinsic brightness|
|Orange||High to medium|
|Medium grey||Red, Green||Medium|
|Violet||Medium to low|
Intrinsic brightness has some important implications.
For legible text, there needs to be sufficient contrast between the brightness of the background and foreground colours. For example, white text on a yellow background would be difficult to read but white on black would not, as Figure 3 (a) demonstrates.
You should be careful when using bright colours, such as white or bright yellow, for large areas of the screen because they can become tiring to look at. Whilst black text on a white background is easy to read, it would be better to tone down the white if your users are reading from the screen all day. Pale grey, cream or magnolia can be good alternatives.
Contrasts in the brightness should not be too extreme, as this may lead to flickering (there are other causes of flickering that we do not go into here). Figure 3 (b) shows a variety of colour combinations, many of which you will probably find difficult to read because they flicker.
As colour perception is so personal, it is good practice to allow your users to modify the colour scheme.