TIP 57

Good Contrast between Background & Foreground

Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone with a colour deficiency or when viewed on a black and white screen. If specifying a foreground colour, always specify a background colour as well (and vice versa).

To test whether your document still works without colour, examine it with a monochrome monitor or browser colors turned off. Also, try setting up a colour scheme in your browser that only uses black, white, and the four browser-safe grays and see how your page holds up.

To test whether colour contrast is sufficient to be read by people with colour deficiencies or by those with low resolution monitors, print pages on a black and white printer (with backgrounds and colour appearing in grayscale).

Don't rely on colour alone

It is vital to ensure that text and graphics are understandable when viewed without colour. If colour alone is used to convey information, people who cannot differentiate between certain colours and users with devices that have non-colour or non-visual displays will not receive the information. For example, 'Press the red button' is not much use to someone with red-green colour blindness.

When foreground and background colours are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of colour deficits.

Why not take a screen grab of a few random pages, open them up in your graphics program, and convert them to grayscale.

UK Government recommendations:

'Text colour must always contrast with background colours'

Guidelines for UK Government websites
Illustrated handbook for Web management teams

NEXT > .< BACK