Skip to content
Wiki
Sensory
Colour as Meaning

Colour as Meaning

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

WCAG 1.4.1 (opens in a new tab)

Any information that needs to be accessed by a user must not be conveyed solely through color. At the simplest level, some users cannot distinguish red from green, so success and failure may look the same.

Colour is obviously not to be removed, but considerations have to be made to ensure that the information is still accessible to all users.

Technically, suitably contrasting colours is sufficient for this guideline, as the contrast difference is the other means, but providing further visual cues can greatly benefit many users and help ensure all information is conveyed effectively.

How to fix

The main way to address this is to add more visual cues to ensure everything is clear.

In the example below, a form input is marked as required but only has red label text to convey that. To improve that, the neighbouring input has the same styling, but the label also explicitly states that the input is required.

This is sometimes done using a simple asterisk (*) to indicate required fields, but the example is more to show that the colour should not be the only way to convey the information.

Other places where only colour may be used incorrectly include directions to specific buttons like "the green button", or inline links that are only notably links because they're blue.

The solution remains the same, add more visual cues, like underlining links, or specifying buttons more clearly.

Dashboard colours

Another example is a dashboard with a number of different coloured tiles, each representing a different status.

Something that comes up often in software dashboards are the use of RAG (Red, Amber, Green) statuses to indicate whether something is doing well or not. If a user cannot distinguish between Red and Green then this information is meaningless.

Adding a legend or a key or anything won't help further, but adding supporting iconography, like a tick or a cross, or a label that explicitly states the status, will help ensure that all users can understand the information.

References