Colour and Contrast

Why it Matters |   How To... |   Testing |   Guidelines

Why it Matters

If you use colour alone to convey information, users who have colour deficiencies, people with low resolution monitors, and those using black and white mobile devices will not be able to make use of the information. For example, asking users to click the red button is not useful if they can't distinguish the red button from other buttons on the screen.

In addition, insufficient foreground and background colour contrast makes content hard to read and may cause problems for some users. For example, an image containing light text on a light background or dark text on a dark background would provide poor colour contrast.

Browsers such as Internet Explorer, Safari and Firefox allow users to set personal preferences for the way in which information is displayed. Unless a website adheres to Web Standards, these settings may have no effect, and in addition few users are aware that they can do this. Users have no control over the colour or contrast of images that contain text.

[return to top]

How To...

The following tips will help make websites more accessible:

  • Use mark up tags rather than presentation tags where possible. For instance using to provide emphasis rather than will allow users to display important text in a way that suits them.
  • If specifying a foreground colour, always specify a background colour as well (and vice versa).
  • Use numbers for colours not names (#000 not black)
  • Avoid using images as backgrounds as they can distract the reader and make content hard to read

You can also provide style sheets with alternative contrasts. The following style sheets would be a useful selection.

  • black on cream
  • black on pink
  • black on pastel blue
  • black on yellow
  • yellow on black
  • black on white
  • white on black
IBM's colour and contrast guidance make useful reading, and these simple Guidelines for effective colour contrast from Lighthouse International cover basic colour theory. [return to top]

Testing

Screenshot of the colour contrast analyser showing a colour combination with insufficient contrast

Print a page in black and white and check that contrast is sufficient. Try photocopying this page three or four times, and see if any information is lost. For example if you can no longer distinguish what is a hyperlink, you should consider underlining links.

Create your own colour scheme in your browser and check that your website uses your chosen colours.

Download the Colour Contrast Analyser from Juicy Studio. This is a tool that you can use to check foreground and background colour combinations have sufficient contrast.

[return to top]

Guidelines

Checkpoint 2.1 Ensure that all information conveyed with colour is also available without colour, for example from context or markup.

Checkpoint 2.2 Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen.

[return to top]