News:

Colour, vision and web pages

Colour is a valuable design tool when used appropriately. It can be used powerfully for highlighting and emphasis. It can convey meaning and it can enhance the visibility and legibility of graphic and textual information. Colour can, however, be the designer’s worst enemy. Colour must be used with care and sensitivity.

Colour Blindness

A common area of concern related to the use of colour is the effect of colour-blindness. Colour blindness affects 6-10% of men and 0.5% of women. Red-green colour blindness is the most common form of the disorder.

Colour blindness is a complex topic. However, from the available research in the field, it is possible to extract some guidelines which can be used by designers.

How Colour Blindness may Manifest Itself

Colour-blind people typically suffer from one of two main symptoms which designers must take into account:

• The inability to differentiate between certain colours or shades of a colour – for example certain shades of red and green (and also yellow) may appear to the user as similar shades of grey;

• The inability to accurately name a specific colour – for example a user may perceive and name a certain shade of red or green as grey, or black or brown or yellow.

Design Consideration

These symptoms lead to the following guidelines:

• Design in black and white.  Add colour for emphasis when the design is complete and never use colour as the only visual cue.

• Do not rely on the differentiation between red and green for critical selection and navigation.
• Do not rely on a user having to accurately name a particular colour. For example if asked to locate the green object in a display, a colour-blind person may not perceive any objects as green, but may instead perceive the green object as yellow in colour.
• Good colour combinations, allowing users suffering red/green colour blindness to accurately differentiate between colours (but not necessarily to name them correctly) include the following:
  • For text against a solid background:
    • Bright yellow against full blue;
    • White against black;
    • Black against white;
    • Bright magenta against very dark green;
    • Dark blue against bright yellow or green.
  • For colour coding multiple lines or bars in a graph:
    • Yellow, cyan and bright magenta against dark blue;
    • Black, red, grey and blue against white.
• Designers should not use red or green text on a white background, as this may be seen by some users as yellow on white which will be very difficult to read. If these colour combinations have to be used, ensure the text is large and bold enough to be legible. Other combinations to be avoided are:

o        Reddish blues against greenish blues;

o        Yellows, greens and oranges in combination;

o        Reddish blues against blues.

Other Visual Design Considerations

There are other visual design considerations which should be taken into account in the design of web pages. These include legibility and accessibility.

Legibility

Legibility is contributed to by size, contrast and pattern. Deigns should always utilise high contrast between foreground and background elements, and should avoid “busy” background patterns which may interfere with legibility.

Accessibility

Text can be fed into a screen reader to render it accessible to blind or visually impaired users. However long pages are problematic and visually impaired users will not be able to “scan” these for interesting or relevant content. To overcome this, HTML should be properly structured using the formal heading tags. These can be used by the screen readers to convey the structure of the page to the user.

The same considerations should be applied to tabulated information. A summary of the contents of a table should always be provided, row and column headers must always be provided, and care should be taken to ensue that the data makes sense when “linearised”.

All visual elements including images, image maps, graphical buttons, auditory and animated elements should have a textual equivalent.

For a detailed discussion of accessibility considerations, with respect to the design of web pages and web based applications, see: http://www.w3.org.