Colour and meaning

Must Not

Information or meaning must not be conveyed by colour only.

Description

Colours can be difficult to distinguish in bright sunlight and cannot be perceived by users who are colour blind, or vision impaired. Screen readers do not detect colour and some users will change colour settings for their whole computer. For example, setting their computer to grayscale or applying a tint to help with reading. Lower specification mobile devices also offer poor colour support.

Colour is often used to show:

  • a tab is selected,
  • a link is available,
  • text is an error message,
  • emphasis,
  • charts and graphics, or
  • other meaningful information.

Additional visual and non-visual methods of identifying information or meaning must be applied to support the use of colour:

  • Visual cues could be text attributes with suitable mark up (such as underline, bold or italic), patterns, or icons with suitable alternative text;
  • Non-visual cues, which are programmatically available to assistive technologies, could be element tags, hidden text or suitable labels, for example ARIA or UlLabel.

IOS

Use visual clues and icons with text equivalents to reinforce meaning. Refer to iOS Human Interface Guidelines

ANDROID

Use visual clues and icons with text equivalents to reinforce meaning. Use the android:contentDescription property to provide short and concise alternatives. The exception is on EditText fields; these must be coded using the android:hint attribute. This helps users understand what content is expected when the text field is empty. When the field is filled, TalkBack reads the entered content to the user, instead of the hint text.

Android example

<ImageView ...  android:contentDescription="Save" />
<EditText ... android:hint="Surname (required)" />                        
<ImageView ...  /> 	[an image with no contentDescription attribute]
<EditText ... android:hint="Surname" />                        

HTML

If colour is used to convey meaning ensure accessible alternatives are provided. This could be underlined text for links, visible text on buttons, alt text labels and so on.

TESTING

Procedures
  1. Activate the app with a screen reader.
  2. Locate objects, images, or elements that use colour.
  3. Determine if colour is the sole means of communicating information.
  4. Verify that there is an alternative visual means of obtaining the same information.
  5. Verify that the screen reader announces the meaning conveyed by the colour.
Results

The following check is true:

  • Colour used to convey meaning is also indicated by an additional non-colour visual;
  • Colour used to convey meaning is announced by the screen reader.