We recognise when colours are used badly on a computer or information display screen: the text is difficult to read and we cannot make sense of the information. But what is the secret of attractive, legible displays? Linda Reynolds, who has designed screens for air traffic controllers, explains some of the tricks of the trade.
Full-colour monitors are now widely used for information displays of many kinds. Colour displays are undoubtedly popular with users, but performance benefits can be difficult to demonstrate. If colour is used inappropriately, performance may even be impaired. In learning or leisure applications, poor use of colour may result in the user becoming frustrated and ceasing to use a particular software product; with other kinds of display, such as those used for monitoring and control purposes, it can result in errors that have more serious consequences. However, with the benefit of some background knowledge about colour perception and an understanding of the different ways in which colour might be applied to the content of the display, designers can avoid unwanted colour effects and enhance usability and visual appeal.
This article aims to give an overview of the principles of good colour design and show how colour can either enhance or diminish our appreciation of material presented on-screen. The reader may gain a better understanding of why some displays are much more readable and attractive than others and why it is vitally important in applications such as air traffic control screens that colour is used intelligently.
Among the perceptual issues that need to be considered in any display are the following:
The choice between light images on a dark background, or dark images on a light background;
The effect of colour on the legibility and conspicuity (visual emphasis) of alphanumeric characters, symbols, lines and other small foreground objects;
The factors that affect the ease with which colours can be discriminated from one another.
In relation to the application of colour to the content of the display, there are two main possibilities: colour may be used to help organise or format the display, or it may be used to code the data in some way. Formatting and coding require different approaches to the use of colour. Until these two sets of issues have been carefully considered in relation to one another the display designer will not be in a position to choose colours and assign them to the content of the display.
To talk about colour in more detail, we first need a vocabulary for describing it. Colour is a three-dimensional phenomenon, requiring three terms for an accurate description. Colours on a cathode ray tube (CRT) can be described in terms of the contributions from the red, green, and blue electron guns that are required to produce them (RGB values). However, most people would not find RGB values helpful as a means of describing colours. A more intuitive system uses the three dimensions of hue, luminance and saturation (see Figure 1).
Hue is the perception described by terms such as red, green, blue, yellow, etc. It is determined by the wavelengths of light that are most heavily represented in the colour.
Luminance is an objective measure of the intensity of light emitted from (or reflected by) a surface. Changes in luminance are perceived as changes in brightness.
Saturation is the perception associated with the purity of a colour. Saturated colours consist of a narrow band of wavelengths and appear vivid; de-saturated colours contain many other wavelengths as well and appear muted.
Dark versus light backgrounds
When existing monochrome displays are converted to colour, often the first thought is to use coloured lines and symbols on a black background. For several reasons, this is not the best option (see Figure 2).
Problems with black or very dark backgrounds include the following:
Subdued lighting will usually be needed to reduce reflections on the screen and to maintain contrast. If the task also involves printed materials, the luminance difference between paper and screen may be fatiguing.
If the colours of small foreground objects are to be accurately discriminated from one another, they will need to be highly saturated. This will reduce the number of usable colours, and will limit the possibilities for both formatting and colour coding.
There will inevitably be differences in the luminance of these highly saturated colours. This will result in differences in legibility and conspicuity.
Re-focusing of the eyes may be necessary between saturated colours; some people find pure blue particularly difficult to focus on. Highly saturated reds and blues may appear to lie in different planes in relation to the surface of the screen.
These difficulties can be overcome by using infilled backgrounds, which have various advantages:
Problems with reflections will be minimised and the display will then be usable in normal office lighting.
The higher screen luminance will improve visual acuity and colour discrimination, thus increasing the range of colours that can be used.
Results of a number of studies suggest that dark characters on a light background are more legible than light characters on a dark background.
Effects of colour on legibility and conspicuity
Legibility depends largely on the luminance contrast between a foreground object and its background (see Figure 3). A contrast in hue alone is not sufficient. This is because the human visual system relies mainly on luminance differences rather than hue differences for the detection of edges between differently coloured areas. Equiluminant colour combinations will have very poor legibility and will be uncomfortable to look at.
Pure blue is particularly poor as an image colour. As well as possible focusing difficulties, our visual acuity is relatively poor for blue images, particularly in the central area of the retina. Furthermore, blue makes little or no contribution to luminance contrast.
Like legibility, conspicuity depends primarily on luminance contrast. The greater the luminance contrast of a foreground object with its immediate background, the greater its conspicuity or apparent importance. Other factors that have an influence include:
Hue. Chromatic aberration causes reds to appear to advance towards the viewer and blues to recede. This enhances the conspicuity of saturated reds.
Saturation. High-saturation colours will usually be more conspicuous than low-saturation colours.
Number of other objects in the same colour. If a number of objects are coded using just two colours, the objects in the colour that occurs least often will appear to dominate the display. They will be seen as a group or ‘figure’ against the ‘ground’ or background of the more frequently occurring colour.
Factors that affect colour discrimination
The following factors need to be borne in mind in selecting colours for ease of discrimination:
Colours should be as different as possible in hue.
High-saturation colours are more easily discriminable from one another than low-saturation colours. Higher saturations will be needed for small foreground objects than for larger areas of colour.
Some 8% of Caucasian males and 0.4% of females have some degree of red/green colour vision impairment. Ideally, therefore, colour coding should be redundant. If this is not possible, the problem can be minimised by careful choice of colours.
Differences in luminance as well as in hue will improve colour discrimination. However, differences in luminance will result in differences in conspicuity and hence in perceived importance. This may not always be desirable.
The maximum number of colours that users are likely to be able to uniquely identify and remember the meaning of is around seven.
Other factors also have an influence, however:
The greater the area of colour, the greater the ease of discrimination. Solid blocks of colour are therefore more effective than differently coloured alphanumeric characters, symbols or lines.
Where colour variations are used in the foreground, the background should ideally be uniform and neutral in colour. Bright, highly saturated background colours should be particularly avoided, for two reasons. First, after only 30 seconds or so an area of highly saturated colour will cause users to see an after-image in the complementary colour (successive contrast illusion). This can be annoying and may temporarily interfere with normal colour perception (see Figure 4). Secondly, bright, highly saturated backgrounds will cause a shift in the apparent hue, luminance and saturation of small foreground areas (simultaneous contrast illusion). Both of these illusions could result in errors in identifying small areas of foreground colour.
Purpose for which colour is to be used
We have a natural urge to group objects on the basis of colour, and to attach meaning to any groupings that we find. Colour is thus a powerful tool and should be applied logically and consistently, never arbitrarily. Whether it is used for formatting or coding, the smaller the number of colours used, the more effective the colour will be. Less is more.
Colour can be used very effectively to create different levels of emphasis on the display, and to divide and relate different kinds of display content. Examples might be the use of colour to separate data from system messages or navigation cues or to indicate subsidiary material in a text-based display. Both emphasis and dividing/relating can be achieved by variations in foreground colour or background colour, as appropriate.
Emphasis. It is important to remember that luminance contrast is the key to emphasis. On a text display, for example, black type will give the greatest contrast against a light background. Headings in another colour will need to be larger to compensate for their reduced contrast. Alternatively, headings might be placed on a block of colour for emphasis.
If the intention is to de-emphasise a block of text, this might be done by using grey type instead of black, provided that legibility is not compromised. A more effective and legible solution would be to retain the black text and place it on a slightly darker background than the main text.
Figure 5 shows the use of colour to create a number of different levels of emphasis in an air traffic control display (note the medium-luminance, low-saturation background, allowing scope for the use of higher luminances and saturations in the foreground).
Dividing and relating. If there is a need to distinguish between areas of the display that are different in kind but not in importance, it is preferable to hold luminance constant to minimise differences in emphasis and to rely on differences in hue. Foreground colours will need to be relatively highly saturated to be easily discriminable, but relatively low saturations will be adequate to differentiate background areas.
With colour coding the aim is to help users to uniquely identify objects or items of data, rather than providing cues about the organisation of the display. It has been shown to be particularly helpful where search tasks are involved. The coding may be either qualitative or quantitative. Qualitative coding. Here the intention is to show differences in kind rather than differences in size or quantity (see Figure 8). Differences in hue are the most effective way of achieving this. For most people there will be no obvious hierarchy in a set of hues, provided that they do not differ too greatly in luminance or saturation. Such categorical or nominal coding might be used, for example, to indicate different areas within a processing plant, or different subject sections within a CDROM encyclopaedia.
Quantitative coding. In this case the aim is to show differences in size or quantity. Coding of this kind is frequently used on statistical maps, in medical imaging, and in many other applications. A set of colours with a clear hierarchy is needed, and this is usually based on variations in luminance. Depending on the number of steps in the scale, and on whether the intention is to give a general impression of a distribution or to enable each step in the scale to be uniquely identified, changes in hue may also be needed. Colour coding of temperature, for example, might run from dark blue through light blue to white and then through yellow and orange to red.
An approach to the design task
There are clearly many factors to be considered in designing a colour display for a given application. Different screens generated by the system may present different kinds of data at different levels of complexity, and at the same time there may be material that needs to be accommodated on all screens. It is therefore important that the designer should take an overview of the whole system and devise a colour palette or palettes that will cater for all foreseeable circumstances. If more colours need to be introduced once a palette is in use, colour discrimination may be compromised. The designer of the original London Underground map would perhaps have chosen a slightly different set of colours had he known how many more lines would need to be added in later years.
Once the mode of colour use has been established, colour sets can be chosen bearing in mind the perceptual issues discussed above. There may of course be other factors to be taken into account, such as the context in which the display will be used (work or leisure), any corporate colours that need to be included, and any longstanding colour associations or conventions. On occasion it may be felt that one of these factors should override considerations of, say, legibility, but the display designer who is aware of the issues discussed above will at least be in a position to make an informed decision.
Finally, it should be said that good display design is an inter-disciplinary activity. Sadly, however, few project teams call upon the particular analytical and visual skills of an information designer or a typographer. No matter how sound the logical principles underlying the design of the system and its user interface, if the visual appearance of the display does not reflect and reinforce these principles and is not legible, comfortable to look at and pleasing to the eye, users will suffer.
Some 8% of Caucasian males and 0.4% of females have some degree of red/green colour vision impairment
We have a natural urge to group objects on the basis of colour
The designer of the original London Underground map would perhaps have chosen a slightly different set of colours had he known how many more lines would need to be added in later years
Jackson R., MacDonald L. and Freeman K. (1995) Computer generated color: a practical guide to presentation and display. John Wiley, Chichester. Reynolds L. (1994) Colour for air traffic control displays. Displays 15, 215–225. Travis D. (1991) Effective color displays: theory and practice. Academic Press, London.
Department of Typography & Graphic Communication, The University of Reading
Linda Reynolds is a lecturer in the Department of Typography & Graphic Communication at The University of Reading, and an information design consultant; for a number of years she was Senior Research Fellow in the Graphic Information Research Unit at the Royal College of Art. She has worked on a wide range of research projects relating to the design of printed and electronic documents. Email: email@example.com