Question 2: Does the site rely on colour alone to convey information?
What does this mean?
Is colour the only way some information can be differentiated? For example, on a course schedule, if the only difference between course start dates and end dates is the colour of the text.
Why does this present a problem?
Persons with visual and cognitive impairments (or those using monochrome monitors) may have difficulty distinguishing differences between colours. In addition, when printing the Web page in black and white, the different colours will be lost, making the information less understandable.
What are the solutions?
1. Use more than colour to convey information
- When using colour to convey information, also convey the information in other formats.
For example, in addition to saying:
Listed in red are the job requirements and the required qualifications are in purple.
use headings or another cue to indicate the different sections.
Similarly, rather than saying:
At any point during the tutorial, you may click the green circle to continue and the red circle to go back.
try saying:
...click the green circle to continue and the red triangle to go back.
- Some Web designers remove the line from beneath hyperlink text, so that only colour differentiates hyperlinks from regular text. If providing hyperlinks with no underline, provide a small graphic or other visual cue to represent a link.
TIP Test whether a Web page still works without colours by examining it with a monochrome monitor, with browser colours turned off, or by printing it on a black and white printer. This will indicate where redundant cues are needed and whether the cues are too small or indistinct to hold up well.
2.
Maximize colour contrast - Priority 2 for images, Priority 3 for text
- Enhance readability by maximizing contrast between foreground and background colours.
- Consider these suggestions when choosing colour schemes:
- Black on white is the most legible; white on black is reasonably legible; other colours on black are less legible.
- Mixing yellow and black is fairly legible.
- If using red or green text, make it large and bold enough to be legible in yellow.
- Black on red and black on green are not legible, as some people will see them as black on black.
- Combining blue and black is legible enough as long as it is not used for fine detail (e.g., paragraph text).
- Combinations such as red-blue, green-yellow, green-white, green-gray (MS Windows "button gray") are poor because they have small brightness contrast and because red/green colour blindness is the most common.
- Avoid highly saturated backgrounds.
TIP To test whether colour contrast is sufficient to be read by people with colour blindness or by those with low-resolution monitors, print pages on a black and white printer (with backgrounds and colours appearing in grayscale). Photocopy the copy two or three times to see how it degrades.
- To ensure cross-platform consistency in colour scheme, Treasury Board Standard 6.5 requires that only standard 216-Web-safe colours be used for Web site elements. Refer to http://www.cio-dpi.gc.ca/clf-upe/216_e.asp for the Web-safe colours and codes.
What is the bottom line?
The bottom line, as stated in WCAG Guideline 2, is don't rely on colour alone.
