[Skip to Contents]

Using colour

Colour is good :

Colour is good - if used wisely and correctly. Users with learning difficulties, such as dyslexia, appreciate a touch of colour and the occasional graphic to break up the monotony of text. Small icons used consistently with main navigation links can also increase the recognition factor.

This site provides a number useful tips: Web Design for Dyslexic Users. [Open link in new browser window.]

Provide contrast :

Visually impaired people, those with a colour deficit and the growing number of silver surfers will appreciate contrasting colours for background, text and links. Contrast increases readability and make it easier to distinguish between link and visited link.

An excellent tool for colour checking is Vischeck [Open link in new browser window.] , which simulates how a page looks to someone with a colour deficit.

Don't use colour to convey information :

It is important that colour is not used to convey important information. "Click the green button to start" or "Required fields are in red." are obvious examples. A screen reader user will not be able to distinguish a green from a red button.

Navigation icons also should not rely on colour alone. They need to be distinguishable even on low colour settings or black and white displays.

Allow user control :

By keeping presentational styles (in this case background, font and link colours) out of the HTML document and instead specifying them in external style sheets, a designer can allow users to set their own preferences in their browsers. They can specify their preferred background colour, or colours for link and visited link, or even apply their own custom made style sheets.

Learn how to change colour settings in your browser in the Evaluation section.

In older browsers, text browsers or assistive user agents, where style sheets are ignored, pages are most likely displayed with a white or grey background and conventional link colours such as blue for link and purple for visited link.

Example:

This experiment only works if your browser supports stylesheets and you are using the default settings in your browser.

This page uses a stylesheet where the background colour has been changed to black, text colour to yellow, link and visited link colours have also been modified and the font size has been increased by 20% - as preferred by some visually impaired users. You can apply these settings in the preferences of most browsers, if the design of the site allows it.

It is also a good idea to test pages on a monochrome display.

Use web-safe colours :

Some screens, like those on small devices (mobile phones, PDAs) or old computers, cannot display the full range of colours available to modern technology. They will use the closest colour to the one specified that is available to them from their limited range.

If you decide not to use colours from the web-safe palette, maybe because you think the percentage of users of older technology is only a small part of your visitor statistics, then at least check your site on an old screen. Make sure that contrast hasn't suffered.

Some tips :

  • Keep backgrounds unintrusive.
  • Black on white is most legible.
  • Some people prefer off-white / light grey backgrounds because white can be too bright.
  • Visually impaired people tend to prefer yellow on black.
  • Red and green, blue and black, green and yellow are combinations that can cause problems for people with colourblindness.
  • Red or green on black is illegible.

Learn more :

An extensive list of links to helpful pages can be found on the resource page.

Dynamic content & multimedia

| Access Guide Home | Table of Contents | Definitions | Glossary |