Web Access Centre

Colour used alone - Web access centre

Summary: Colour is a useful indicator of infomation but can not be used alone.

• Rationale
• Techniques
• Testing tips
• Website Accessibility Initiative compliance
• Other pages about colour

---

Rationale

Not everybody can access colour. A user with a screen reader or braille display cannot see colour and the software cannot interpret colour. Colour-blind users may have problems differentiating between some colours. Users with low vision may also browse with colours switched off or using their own style sheets. PDA (Personal Digital Assistant) or text based browser users also may not be able to view colours.

However, using colour to reinforce information, rather than relying on it to convey the message, can act as an enhancement to accessibility. People with cognitive problems, the elderly or children may rely on colour to enhance understanding of information and for highlighting navigational aids. So colour, when used along with another means of identification, can be considered a visual aid.

Techniques

• Graphs and charts should go beyond just colour coding to convey information. Use patterns and text to indicate change. Pattern in a pie chart for example gives a visual indicator to a user viewing in black and white. Text is necessary for a screen reader, braille output or text-based browser user.
  
  
• Colour coding navigation is an excellent way to provide an additional means of indication to where a user is in a site but cannot be used alone. Ensure that the page has a clear TITLE element and structured headings to confirm which page it is. In addition to this a heavy font weight can be used for the navigational link of the current page.
  
  
• Using a different colour for linked phrases is a good visual indicator of links but not distinguishable if a user has a monochrome browser or is browsing with colours switched off. Using underlining in addition to the colour is standard practice to make links obvious. This is especially important for links contained within a paragraph of content.
  
  
• Coloured regions or borders can be used to create visual separation in a page making the page easier to understand when read visually. Make sure however that grouped information within borders also has some structure such as a correctly marked up heading or structured lists. A screen reader or braille display will then be able to interpret this.

A good use of colour to enhance layout and readability is to use alternating colours in rows or columns of a data table. This vastly improves the readability of a table when a page is accessed visually.

• Provide colour in a way that ensures that people can override the colours you specify via their browser. By using flexible CSS (Cascading Style Sheets) you can allow people to customise your pages to suit their needs. This way you can use the colours you want but a user is able to change colours if they need to.
  
  
• Colour alone should not be used to convey information. For example a red button and green button to indicate stop and go. Adding ALT text to the image of “Go” and “Stop” will make the images screen reader, braille output and text-based browser accessible. This in itself is a requirement of WCAG (Web Content Accessibility Guidelines) version 1.0 Checkpoint 1.1. however, you should also use two different shapes, as well as colour, to make them visually different and more user-friendly, for those with colour blindness.
  
  
• Coloured text alone should not be used to convey meaning. For example in forms don’t say, “All fields marked in red are obligatory” as the colour difference won't be conveyed to screen reader, braille output and text based browser users. Use red together with an asterisk (*). This will then be clearly visible to users with monochrome browsers and conveyed to speech and braille output users.

Testing tips

Verify that all information is available regardless of whether colour is available or not.

• Accessibility toolbar - Go to Colour - Greyscale. This will display the page in black and white, which will enable you to check that all information is available with colours switched off.
  
  
• Browser - Go to Tools - Internet options - Accessibility and check "Ignore colours in the page. Always check graphs and charts to see if there is a clear alternative description of the content in text elsewhere on the page.
  
  
• Text-based browser - View your pages in a text-based browser as these do not support images or colour. Use your own judgement to determine if the loss of information is critical to the message or functions of the page.

Website Accessibility Initiative compliance

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

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about colour

• Avoid relying on colour alone
• Colour and contrast

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 20/11/2008 11:13