Summary

• Use colour to parse the visual space into background and foreground objects. The attentional system likes to jump from one foreground object to another. Warm colours on a cold background are effective - it helps enhance foreground-background separation.
• Use colour carefully to highlight important information.
• Our chromatic system has lower resolution then the achromatic system. Colour cannot produce fine detail. Use black on white (or near-white) for legibility.

Acknowledgements

This article is summarised from Ergo/Gero's very detailed article on colour perception. It's taken mainly from parts 5 and 6.

What is colour good for?

A designer should not use colour without a specific plan or goal. Here are some of colour’s principle uses:

• Conveying emotion and meaning
• Changing perception of space
• Changing apparent size
• Showing similarities and differences
• Parsing the visual field into chunks
• Linking spatially separated objects together
• Attracting attention
• Creating emphasis
• Smoothing to improve image quality
• Creating aesthetic and emotional appeal

Conveying emotion and meaning

There are some standards on the assignment of colours to meaning. OSHA (Occupational Safety and Health Agency), for example, has standardized:

• red: danger
• orange: warning
• yellow: caution
• blue: notice
• green: safety

Various sources have suggested other standard meanings signaled by colour:

• red: urgency, passion, heat, love, blood
• purple: wealth, royalty, sophistication, intelligence
• blue: truth, dignity, power, coolness, melancholy, heaviness
• black: death, rebellion, strength, evil
• white: purity, cleanliness, lightness, emptiness
• yellow: warmth, cowardice, brightness
• green: nature, health, cheerfulness, environment, money, vegetation

In addition, some quasi-standardized colour meanings are emerging in the computer data entry fields:

• gray field: read only data
• white field: optional data entry field
• yellow field: required data entry field
• red field: error in field entry

Changing perception of space

Warm colours such as orange, red, yellow, pink, and white appear closer. Cool colurs such as blue, green, grey, and purple appear distant. A designer can use these colour properties to add a 3D feeling to a flat display and enhance separation of foreground and background. The foreground-background separation works best when foreground colour is bright and highly saturated while the background is desaturated.

Changing apparent size

Brightly coloured objects generally appear larger than dark ones of equal size. People will judge yellow larger than blue, for example.

Showing similarities and differences

Hue (colour) is good for showing categorical (nominal scale) same-different distinctions. Hue is poor for showing quantity relationships: more/less, bigger/smaller, etc. because there is no natural ordering. Size, brightness, length and other variables which are naturally ordered "less to more" are better for representing quantitative differences (order and interval scales). Use only size and space to represent ratio scales.

Parsing the visual field into chunks

With several hundred million years of evolution behind us, colour perception is deeply wired into our fabric. As a result, colour perception is fast, accurate, automatic, and effortless. It is first absolutely critical to know a bit about early vision and the distinction between "attentive" and "preattentive" processing. Everyone who creates graphics should understand this distinction since it is central to effective visual design.

When a viewer first looks at a scene, the general strategy is to use a divide and conquer strategy - decompose the image into pieces that are examined one at a time. There are several problems here. How do you:

1. quickly and efficiently break the image into useful chunks?
2. isolate a single chunk from the rest for examination?
3. know which chunk to look at first?

Problem 3 is discussed in the next section "Linking spatially separated objects together".

Problem 2 is dealt with by "attentive" processing i.e by using focused attention. Viewers shift attention by moving the eyes so that the area of interest forms an image on the fovea, the highest acuity area of the retina. Attentionally illuminated objects are then processed for meaning (what the text says, what the icons are suggesting, etc.) and are no longer simply patches of colour.

Problem 1 is dealt with by "preattentive" processing. This occurs at the first moment a person sees an image or scene, when the viewer has not yet focused attention to any particular location or object. At this stage, the viewer:

• takes in the entire field. Attention is not focused on a paticular object, and there has been no processing to extract meaning.
• parses the field into segments and differentiates foreground from background. This must be done with raw sensory information, such as colour, because there is not yet any m