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

This free course is available to start right now. Review the full course description and key learning outcomes and create an account and enrol if you want a free statement of participation.

Free course

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

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.
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

Percentage Achromatic colours Colours Intrinsic brightness
100 White Very high
Yellow, Yellow-green High
Orange High to medium
Medium grey Red, Green Medium
Violet Medium to low
Blue Low
0 Black None
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)
M873_1

Take your learning further

Making the decision to study can be a big step, which is why you'll want a trusted University. The Open University has 50 years’ experience delivering flexible learning and 170,000 students are studying with us right now. Take a look at all Open University courses.

If you are new to university level study, find out more about the types of qualifications we offer, including our entry level Access courses and Certificates.

Not ready for University study then browse over 900 free courses on OpenLearn and sign up to our newsletter to hear about new free courses as they are released.

Every year, thousands of students decide to study with The Open University. With over 120 qualifications, we’ve got the right course for you.

Request an Open University prospectus