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.

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

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, we offer two introductory routes to our qualifications. You could either choose to start with an Access module, or a module which allows you to count your previous learning towards an Open University qualification. Read our guide on Where to take your learning next for more information.

Not ready for formal University study? Then browse over 1000 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 prospectus371