Colour contrast

Must

The colour of text and background content must have sufficient contrast.

Description

Good colour contrast assists people with vision impairment, including colour blindness, and cognitive impairments when viewing content. It also accommodates lower specification devices with poor colour support and assists all users in a brightly lit environment.

Good colour contrast is also essential when using colour as a differentiator, for example, when colour is used to indicate the presence of a link or a selected tab with text. The colour difference between the link text and non-link text must have sufficient contrast.

In lieu of a proven colour contrast standard for mobile devices, the WCAG 2.0 Level AA contrast ratio must be met or ideally exceeded. It requires a contrast of at least 4.5:1 for non-bold text smaller than 18pt.

IOS

Use standard iOS colours for buttons, text, and other user interface objects or ensure the foreground and background provide sufficient contrast.

ANDROID

Use standard Android OS colours for buttons, text, and other user interface elements or ensure the foreground and background colours provide sufficient contrast.

HTML

Key recommendations are:

  • For text or images of text avoid background colours or use background colours that have sufficient contrast from the foreground colour;
  • If background colours are used, apply the 4.5:1 contrast ratio to foreground colours.

TESTING

Procedures
  1. Activate the app.
  2. Locate samples of text with background colours and links that are only identified by colour.
  3. Identify the colour values:
    - Open the module in the app,
    - Take a screen shot of the module (home+power button on iOS),
    - Email or sync the picture to a desktop PC,
    - View the image of the page to be tested,
    - Determine the foreground and background colour of the content using an eye dropper tool to obtain the colour values for the background and foreground colours.
  4. Manually inspect the element's colour definition.
  5. Use a reliable tool, such as Snook.ca colour contrast check, Webaim color contrast checker or TPG colour contrast analyser, to check if contrast is sufficient.
  6. Enter the foreground and background values into the colour contrast analyser.
  7. Verify the luminosity requirements are met and that the colour contrast meets the minimum ratio requirements of 4.5:1 for standard size and non-bolded text.
Results

 The following check is true:

  • Contrast between text and background meet minimum colour contrast (luminosity) ratio requirements indicated by WCAG 2.0 of 4.5:1 for standard font size that is not in bold.