Mobile Accessibility Guidelines - Design

Colour and meaning must not


Information or meaning must not be conveyed by colour only.


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 device or platforms. For example, setting their computer to greyscale or applying a tint to help with reading on computers. 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 in iOS.

iOS

Use visual clues and icons with text equivalents to reinforce meaning. Using standard iOS elements will mean users are familiar with controls, how they look and how they work.

For further information, refer to the . Also refer to the patterns, foundations and articles available on the website.


Android

Use visual clues and icons with text equivalents to reinforce meaning. Using standard Android elements will mean users are familiar with controls, how they look and how they work. For further information, refer to the website. Also refer to the patterns, foundations and articles available on the website.


HTML

Use visual clues and icons with text equivalents to reinforce meaning. Using standard HTML elements will mean users are familiar with controls, how they look and how they work. For further information, refer to the to the patterns, foundations and articles available on the website.


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.

Outcome

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.