TIP 56

What Is The Best Text and Background Colours To Use In Website Design?

There is no one "best" combination of text and background colours. Different sight conditions can result in widely different needs - some users may be comfortable with black text on a white background, others may prefer white text on a dark blue background, others yellow text on a back background, etc.

Pages should be designed in such a way that users can make use of their browser and PC settings to choose a colour scheme that works for them. Again, try to avoid using graphics of text, since users can't change the text and background colours when text is presented in this way.

The web is by and large a more colourful medium than the printed page. Colour is cheaper on the web. Colour can be ornamental, can help to establish a visual identity, and can have practical value (red might draw attention to important information). But colour poses difficulties to accessibility as well.

Do your web pages exclude people? It would be a shame, as in the near future most web browsers will provide simple ways for readers to adjust the Colour of elements on a web page, via user style sheets, which can override your style sheets. (You can do this now with IE5 Macintosh edition.)

How to avoid these problems in website design? Use style sheets, rather than the HTML <font> element. And avoid relying on colour combinations to alone convey meaning (ie - "click on the red button").

Colour Blindness & Website Design

• The Colour Laboratory - Project at the AWARE Center that allows designers to to select colours and see how they appear next to one another, and in various foreground/background combinations under simulated colour blindness scenarios.
• Considering the colour Blind - Feature from WebTechniques that suggests that as many as 1 in 12 visitors to certain Web sites may have some sort of colour blindness. The article provides a general description of the different types of colour blindness and suggests strategies for designing graphics and colour schemes that are more usable for this audience.
• Colourblind Design Evaluation - This online tool provides 3 ways to see what colours used in HTML code look like to the colour blind.
• Colourfield Insight Plug-in - This plugin can be used by designers to model and predict image legibility for colour deficient viewers. The site also includes an online demonstration of three common types of colourblindness. (Mac only)
• Vischeck - This online tool (also available as a Photoshop plugin for Windows) allows you to upload an image file and check the visibility of your graphics and text. This tool can show you what your image looks like to people who are colour blind, people with glaucoma or macular degeneration, elders and children.
• Colour Blindness Theory, Simulation - Information on red/green colour blindness emulation.
• Colour Deficiency - Information about colour deficiency from the American Optometric Association.
• Colours for the Colour Blind - This site describes colour deficiency, as well as its causes and effects. It also furnishes a set of colour charts to aid the colour blind in working with computer colours, especially on the Internet and in Web sites.
• Safe Web Colours for colour-deficient vision - This site contains information and design tools that help authors understand which colours are easily confused and how to ensure that important colour cues are not lost.

NEXT > .< BACK