Skip to content
Skip to main content

About this free course

Download this course

Share this free course

Designing the user interface: text, colour, images, moving images and sound
Designing the user interface: text, colour, images, moving images and sound

Start this free course now. Just create an account and sign in. Enrol and complete the course for a free statement of participation or digital badge if available.

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 coloursIf 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 monochromeDesigning 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 perceptionColour 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 reinforcementColour 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.
Götz, V. (1998) Color and Type for the Screen, RotoVision SA.

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
PercentageAchromatic coloursColoursIntrinsic brightness
100WhiteVery high
Yellow, Yellow-greenHigh
OrangeHigh to medium
Medium greyRed, GreenMedium
VioletMedium to low
BlueLow
0BlackNone
from Götz, 1998

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.

Figure 3 Contrast between colours (from Götz, 1998)