TIP 58

Don't use colour to 'describe' anything

Website pages should be designed so that all information conveyed with colour is also available without colour.

Explanation

When colours are used as the sole method for identifying screen elements or controls, persons who are colour blind as well as those people who are blind or have low vision may find the web page unusable. This provision addresses not only the problem of using colour to indicate emphasized text, but also the use of colour to indicate an action. This provision does not prohibit the use of colour to enhance identification of important features. It does, however, require that some other method of identification, such as text labels, must be combined with the use of colour.

Example

• As an example, a web page that directs a user to "press the green button to start" should also identify the green button in some other fashion than simply by colour.

colour Blindness Tools

• 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