skip to content

Perception and the design of forms – Part 3: Colour

13 July 2010
Picture of a multicoloured background with white bubbles on it. Courtesy of www.backdropsheaven.com.

Image courtesy of Digital Backdrops Heaven via stock.xchng.

This is the third of six articles we plan to publish on how the visual design of forms should be influenced by the way humans see.

Each article in the series will look at one of the 6 Gestalt Laws of Perception that relate directly to forms. These 6 laws are:

Characteristics (things that are an aspect of a single object)
Relationships (things that are about how multiple objects relate)
  • Figure/ground
  • Proximity
  • Similarity

In this article we are going to touch on the final characteristic: colour. It could be argued that colour has the most influence out of all the characteristics, in both a positive and a negative way.

Generally speaking, humans are sensitive to colour

We are hardwired to be able to notice colour changes in our environment, and not just consciously, but without thinking. Things like this that are perceived without our conscious attention are said to be processed pre-attentively.

An example of pre-attentive processing is shown Figure 1. It is much easier to count the “3's” in the second block of numbers than the first. This is because our brains process the colour difference without us having to think about it.

Two blocks of numbers, one in all black and one in grey with all instances of the number three in red.
Figure 1: Example of pre-attentive processing (of colour). Based on Figure 5.3 in Colin Ware's Information Visualization: Perception for Design (p. 150).

All three of our characteristics — shape, size and colour — are pre-attentively processed. Anecdotal evidence suggests, however, that colour typically has a greater impact on the overall design of a form than size and shape, both from a usability and an aesthetic point-of-view. For example, a form with fields that are all the same size doesn't work so well but is not nearly as hard to look at and fill out as one saturated in overwhelming swathes of colour, as in Figure 2 below.

An online conference registration form using lots of fluorescent yellow and green.
Figure 2: The way colour has been applied to this form makes it hard to use.

Because colour draws the eye, it should be used sparingly

As colour is pre-attentively processed, our brains are going to have to work through it, whether we consciously want to or not. Therefore, when you have too much colour, you're making the task of using the form more cognitively burdensome than it needs to be, as Figure 2 illustrates well.

Burden on the user is to be avoided as much as possible, so we recommend starting the visual design of a form with no colour and only adding colour where doing so helps communicate to the user. For example, the colour red is applied to the asterisks on the form in Figure 3, to help make mandatory questions easy to identify.

Form collecting contact information, laid out in black and white, except for red asterisks indicating mandatory fields.
Figure 3: The red asterisks on this form stand out because colour is used sparingly.

Conversely, the colour added to the field labels in Figure 4 communicates nothing to the user about how to fill in the form. Instead, it competes for attention with the red used for the asterisks, making these harder to see. It also serves to separate the field labels from their corresponding fields, for reasons we'll look at a later article in this series. So all in all, the colour in this example actually harms this form rather than helping it.

Online form with dark green behind field labels and light green behind fields.
Figure 4: The green shading on this form communicates nothing to the user and thus creates visual noise.

Colour is quite complex, so use it with care

Not everyone sees colour the same way

The first section of this article was headed “Generally speaking, humans are sensitive to colour”. The caveat “generally speaking” was added because the ability to see and distinguish between colours varies from person to person.

Colour blindness — or more accurately, deficiency in colour vision — makes it hard for some people to distinguish certain colours from each other. About 10% of men and 1% of women have some form of colour vision deficiency, with the most common forms of deficiency making red hard to distinguish from green1.

Figure 5 below shows a map of a bike ride, with red-green colour blindness simulated. Figure 6 shows that same map, for a viewer without any colour vision deficiency.

Satellite map of terrain with a cycling route marked but hard to see.
Figure 5: This map simulates red-green colour blindness.
Satellite map of terrain with a cycling route marked and clearly visible.
Figure 6: This is the same map as Figure 5, for a person without any colour blindness.

This clearly illustrates how colour used on a form must be selected with care. Moreover, we should not rely on colour to communicate anything to the user, in case they can't see it. This is why red asterisks are used to indicate questions that must be answered: even if the form-filler can't see red, they can see the shape of the asterisk2.

In Figure 7, mandatory fields are indicated with a red label, optional fields have a black label. This makes the form very hard to use for someone seeing red as dark grey, thanks to their colour vision deficiency.

Web form using black for optional field labels and red for mandatory field labels.
Figure 7: With this form, the only thing differentiating the mandatory fields from optional ones is the label text colour (red versus black respectively). People with some forms of colour blindness are likely to see the red text as dark grey, thereby making it hard to distinguish from black.

Colours are not always presented the same way

Even if our form-filler has complete colour vision, the medium they are using will affect the way the colour in a form is perceived. For example, with electronic forms, colour renders differently depending on:

  • which display device is being used (e.g. type, model and even manufacturing of individual units);
  • the way the user has configured the display device; and
  • the colour settings for the system and its applications.

If we're working in hardcopy, colours are affected by every part of the production process:

  • paper type (e.g. paper versus card, coated versus uncoated);
  • paper weight;
  • ink type; and
  • printing mechanism.

And no matter what the medium, perceptions of colour can be influenced by:

  • the medium's age;
  • the angle at which the medium is being viewed; and
  • the surrounding light, both ambient and direct.

All this means that we can never be sure exactly how the colours in our form will appear to the user. This in turn gives us more reason not to rely on colour too much, and use it minimally in our designs.

Some colours are harder to work with than others

Whatever colour you do use, contrast is critical. The table below gives some examples of colour combinations to favour and avoid.

Good contrast Poor contrast
Black on white Yellow on white (Yellow on white)
Dark blue on white Grey on black (Grey on black)
Dark green on white White on light grey (White on light grey)
White on black Green on red (Green on red)
White on dark grey Red on blue (Red on blue)
Black on off-white Mid grey on dark grey (Mid grey on dark grey)

Cultural meaning of colour is not clear cut

Our final word of warning is about the cultural and emotive associations that colour can have.

You've probably seen at least one form that uses green as a colour of success, positivity and moving forward, with red reserved for errors, warnings, stopping and problems. Seems logical: after all in many Western cities traffic lights are green for go and red for stop. Some people also argue that green is a calming colour whereas red is passionate or angry.

Problem is, these colour associations are not consistent across cultures. Colin Ware tells the story of an Asian student in his laboratory who chose to represent deleted entities with the colour green and new entities with red…[The student explained] that green symbolises death in China, while red symbolises luck and good fortune.3

Check out this Colours in Culture information graphic to get a sense of just how much the meanings assigned to colours can vary. Obviously we need to think about the audience for our form before we apply colour, and at the very least recognise that that colour may not be interpreted the same way by all users.

With colour, less is definitely more

We've only just touched the tip of the iceberg that is colour. So what's a form designer to do, when colour is so complex? We can only reinforce our recommendation to:

  • Use no colour by default.
  • Add colour on an as-needs basis, and sparingly.
  • Check how your particular colours might be perceived and interpreted by your target audience.

Above all else, remember that like the other visual elements of your form, colour is there not just to make the form look pretty, but also to communicate to the user. So make sure your colours are working for you.

References

1 Ware, C. (2004) Information Visualization: Perception for Design. Morgan Kaufmann, San Francisco, p. 99. 

2 Another good example of using shape as well as colour to communicate is described in the post Designing for color-impaired users on the North Temple website. 

3 Ware, C. (2004) Information Visualization: Perception for Design. Morgan Kaufmann, San Francisco, p. 16. 

If you're interesting in reading more about colour vision, may we suggest: