Understanding Accessibility
by Vivienne Trulock
Guideline 2. Don't rely on colour alone.
Colour blindness and some types of dyslexia mean that people with these disorders may not be able to see various colour combinations properly. For example, if a text hyperlink is green in the normal state and red in the rollover state, people with red-green colour blindness may not realise that the text is a link, as there would be no perceived change on colour on rollover. This guideline specifies that no elements should rely solely on colour to be recognised.
There are 2 specific checkpoints in Guideline 2.
| No. | Checkpoint | Priority | How to check | Disability Accommodated |
|---|---|---|---|---|
| 2.1 | Ensure that all information conveyed with colour is also available without colour, for example from context or markup | .Priority 1 | .Manual check for 2.1 |
Colour Blind |
| 2.2 | Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen. | .Priority 2 for images .Priority 3 for text |
Manual check for 2.2 | Partially Sighted Colour Blind |
Checkpoint 2.1 - Ensure that all information conveyed with colour is also available without colour, for example from context or markup
How do I do it?
Compliance with this checkpoint involves links being either different from normal text (underlined, italicised, bold, in buttons etc) or in obvious navigation bars.
dash-underline
dash-underline example
This can be done simply in the external style sheet. A sample style for a link with a dash underline is given below:
a:link {
font: small
"Comic Sans MS";
color: #006699;
text-decoration:
none;
border-bottom:
1px dashed #006699;
}
How do I check that it meets the WCAG criteria?
Links should be in an obvious navigation bar or have a font effect applied or else they will fail the check. For example, where in-text links are found, they must have a font effect applied. Font effects applied to links should not be used for non-linked text. Other colour specific content, where not marked up, will also cause the page to fail.
An obvious navigation bar will have either:
- a separate vertical or horizontal grouping of more than two links;
- a background colour effect;
- a border;
- a graphic which implies a navigation bar.
Checkpoint 2.2 - Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen.
How do I do it?
If the foreground and background colours are too similar, they may not provide a good enough contrast for people with poor vision. Older people tend to have a more yellow vision so they may not always see what you do.
How do I check that it meets the WCAG criteria?
The purpose of this check is that partially sighted or colour blind individuals will be able to read the text on the background colour of the page.
An accessibility tool called aDesigner can be used to check this. aDesigner has 4 settings for low vision for which it can make a comparison regarding foreground and background colour combinations, including the three types of colour blindness, and crystalline lens transparency, or yellowing of the eye, associated with aging.
The default settings in aDesigner can be used independently. These are:
- crystalline lens transparency of 40 (years of age)
- and each of the three colour blindness
- protanopia
- deuteranopia
- tritanopia
aDesigner awards a maximum of 3 stars for each test. Pages can be deemed to have passed where they are awarded 3 stars on each of the 4 tests.
