Rule n° 181 - Information is not conveyed by color alone.
This rule implies not using color alone to refer to content or a function. For example, the mandatory nature of a form field marked in red may not be perceived by everyone.
Goal
- Enable access to information for users whose browsers, platforms, technical aids or disabilities (such as color blindness) prevent them from viewing or differentiating between colors
- Make information accessible by web crawlers.
- Improve content accessibility for people with disabilities.
Solution technique
In addition to colour, provide an additional mechanism to convey the information provided by the colour. This mechanism, independent of the CSS formatting layer, can consist of several types:
- Provide semantic markup (strong, em, etc.)
- Add text indications (asterisk indicating a mandatory field)
- Add hatching, patterns, borders, etc. in maps and charts.
Moyen de contrôle
Checking requires visually comparing two versions of the page: the normal version and a version where the colours are disabled. It is therefore easier to work with two screens.
For each page checked:
- Disable colour support via your test toolbar then switch the images to grayscale.
- Check by comparing the two versions whether the version without colours shows any loss of information. This will be the case, for example, in a navigation menu where the current heading is only differentiated by its colour, or even in a map whose areas are simple solid areas of colour without borders or patterns.
Attention: Information may sometimes be independent of the colour in a title attribute, causing a tooltip to appear when hovering over the content. Because access to the tooltip from the keyboard is not currently possible by default in all browsers, this solution must be ruled out.