±«Óãtv

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. Conversely, strong contrast can be difficult for other people and in low lighting.

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. Steer away from full-white and full-black, particularly for TV apps, and consider providing a ‘night mode’ for apps if appropriate

Ensure good colour contrast for:

• Typography - links, headings, paragraph text, validation messages and errors;
• Images - icons, glyphs, editorial text in images;
• Inputs - form elements and buttons Navigation - links and container style.

In lieu of a proven colour contrast standard for mobile devices, the 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

Where possible, use standard iOS colours for buttons, text, and other user interface objects or ensure the foreground and background provide sufficient contrast:

• 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.

---

Android

Where possible, use standard Android colours for buttons, text, and other user interface objects or ensure the foreground and background provide sufficient contrast:

• 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.

---

HTML

• 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. To identify the colour values:
   • 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 , or 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.

Outcome

The following check is true:

• Regular text and images of text exceed the contrast ratio of 4.5:1
• Large text, at least 18 point (24px) or 14 point (18.66px) bold, has a contrast ratio of at least 3:1.