Ensure appropriate use of colours and contrasts in screen design

While designers may wish to customise their courses to reflect the individual teacher and course, inappropriate use of foreground and background colours and contrast can make an interface hard to distinguish, read or interpret for people with visual, perceptual or spatial difficulties. Colour used in moderation can direct attention to specific material but used indiscriminately, it can be distracting. To ensure that colours are consistent and accessible the following points should be considered:

• Limit the colour scheme to only 3 or 4 colours (in addition to black and white), using a primarily monochromatic scheme.
• Choose a base colour for the main scheme, and find one or two other shades of the same colour family to tone with it.
• Make sure that the chosen shades contrast enough to be readable when used as text on top of another shade, or on white.
• Strong contrast between foreground and background is important, some colours do not provide sufficient contrast. Black text on a white background is safest.
• Avoid 'warm' colours for foreground or background (e.g. pink, magenta).
• Backgrounds are best in cool, pastel colours e.g. white, grey, pale blue.
• Avoid using complimentary colours (colours that are opposite to each other on the colour wheel (e.g. red/ green, blue/ orange

Ensure that if colours are used to convey information that alternative cues are provided for those who cannot see or distinguish colours.

More information on colour and colour contrasts can be found at: http://www.labs.bt.com/people/rigdence/colours/ColChoice.html

Examples of Colour contrast
Avoid warm colours for background and poor contrast
Avoid colours that are opposite on the color wheel
Complimentary colours can be a problem
Pastel backgrounds and strong contrasts are best

 

Figure 6 : The colour wheel used for checking contrast

This checkpoint relates to W3C guidelines: Don't rely on colour alone.