1.2 Ensure that information does not rely on colour perception
Contents
WAI Checkpoint 2.1
Full WAI text: "Ensure that all information conveyed with colour is also available without colour, for example from context or markup."
Colour is useful for conveying information but you should not rely on colour as the only way to communicate meaning. Use more than just colour to communicate information by taking advantage of labels, style effects, etc.
Rationale
Not everyone can easily perceive differences in colour and they would find it difficult to understand information which is communicated by colour alone. For example, imagine two buttons on a screen, both are identical in terms of size and shape. One is green, the other red. Clicking the red button will destroy the user's computer. If the user can't distinguish between the colours and there are no labels on the buttons, they can't make the correct choice.
Users find it hard to perceive colours if they work with poor quality or monochrome display screens or if they are colour-blind.
Similarly, it is difficult to read text displayed on a background colour which is very close in terms of either hue or contrast. Some colour combinations, such as red text on a green background are also difficult to differentiate.
Do not rely on colour alone to convey meaning
The buttons on this web page rely on the users ability to distinguish between red and green.
Directions and Techniques
Supplement information conveyed through colour with style effects
Style effects, such as typefaces, can be used to highlight differences in information.
Add labels or symbols to graphic links or buttons to communicate their function
Labels can be displayed as text which is clearly associated with a graphic link or button. The label could be in the format of text or an icon or symbol which is displayed on the graphic element. You could also use alt text to associate a label with a graphic control.
Provide link titles that make sense when read out of context
If you provide a group of links, do not rely on colour alone to communicate information about the links (e.g. "click on the red links to edit this document" followed by lists of links, all of which read "click here". Some are red.). Link titles should which make sense when read out of context, e.g. "Edit the spelling", "Edit the font styles".
How you could check for this:
Print the page on a black and white printer
This will provide some indication of how the page would look without colour. However, this is not a foolproof test. Most browsers are configured so they don?t print background colours which could be displayed behind the main body of text on the page.
View the page on a monochrome browser
This will give show how the page would look without colour and you can determine if only colour is used to communicate information.
Test with Vischeck
Vischeck is a piece of software which can emulate how a page would appear to a user who is colour blind. You can get Vischeck at http://vischeck.com Go to Vischeck.com
Guidelines for Web Accessibility - Priority 1- 1.1 Provide a text equivalent for every non-text element
- 1.2 Ensure that information does not rely on colour perception
- 1.3 Avoid causing the screen to flicker
- 1.4 Provide an auditory description of the visual information in multimedia presentations
- 1.5 For multimedia, ensure that timing of alternative descriptions is synchronised with the presentation
- 1.6 Use the clearest and simplest language appropriate
- 1.7 Identify language changes in text
- 1.8 Ensure that equivalents for dynamic content are updated when the dynamic content changes
- 1.9 For data tables, identify row and column headers
- 1.10 For complex data tables, use mark-up to associate data cells and header cells
- 1.11 Add titles to frames
- 1.12 Ensure that documents can be read without style sheets
- 1.13 Provide text links to emulate server-side image maps
- 1.14 Use client-side image maps rather than server-side image maps where possible
- 1.15 Ensure that scripts and applets that provide the only source of important functionality are directly accessible or compatib
- 1.16 Ensure that pages are usable without support for scripts, applets, or other programmatic objects
- 1.17 If you cannot make a page accessible, provide an equivalent accessible page
