You are here:
- Manual
- Development
- Use of colour
- Meaning
Use of colour: The meaning of colour on web pages
Colour is often used as both a decorative and a communicative design element on a web page.
Decorative design elements are literally used for decoration only. The lack of such elements – for instance background illustrations – does not affect the visitor’s understanding.
Communicative elements may have significance for the visitor. Information is communicated to the visitor by means of these elements. Examples are text (in HTML or images), links, navigation, symbols/icons and (form) buttons.
Decorative elements are not discussed here, because the use of colour for these elements has virtually no effect on the sustainable accessibility of websites. The WCAG (Web Content Accessibility Guidelines) include guidelines on the use of colour for communicative elements.
Make sure that the meaning of communicative elements is not expressed only through colour.
Guideline R-pd.10.1
“Ensure that all information conveyed with colour is also available without colour, for example from context or markup.”
Why is this important?
An example: a visitor has forgotten to complete a mandatory field when filling in a form. The visitor is shown the information again, accompanied by a request to fill in the mandatory field. All fields are provided with a green border, but the forgotten mandatory field now has a red border. If the visitor has protanopia (a form of colour blindness in which red and green cannot be discriminated), the website owner and the visitor will have a problem. The visitor cannot tell the difference and as a result the owner will not receive the data.
In this example colour is the only means used to convey meaning. Colour can be used in this way, as long as it is supplemented with colour-independent means. In the example the developer could have placed a bolder red border around the skipped field. However, this solution is useless to blind visitors using a speech browser, and to people who use text browsers or old browsers that do not support CSS (Cascading Style Sheets). Using markup in the HTML of the page (for example, <strong></strong> around the label element) may well provide a solution. So a solution to the problem in the example would look as follows.
| Visitor's characteristics | Provision |
|---|---|
| Normal eyesight | Red border |
| Colour blindness | Bolder border |
| Speech, text or old browser | HTML markup |
| Useful for all visitors: | Explanatory text |
Observable provision
When web pages are being developed, it is important that all provisions are visible not only in the HTML code of the page but on the web page itself. For example, strong markup is usually made visible as a bold type text, but the title attribute is only displayed if the mouse pointer is moved over the element.
Consistent use of colour
Be consistent with colour use when indicating meaning.
Guideline R-pd.10.2
Most colour blind people can see most colours – the problem occurs when certain colour combinations occur. For visitors without visual impairments as well as colour blind visitors, consistent use of colour can be an important factor in becoming comfortable with the site's Graphic User Interface: for example, if error messages are displayed in ‘red’ with a red symbol, this should be the case throughout the site, to prevent confusion.
