Colour Contrast - Mobile web

Requirements

• Ensure that information conveyed with colour is also available without colour.
• Ensure that foreground and background colour combinations provide sufficient contrast.
• Follow current Web Content Accessibility Guidelines about colour conformance:

1. 1. For colour contrast to meet AA standard (4.5:1)
   2. For colour contrast to meet AAA standard (7:1)
   3. The colour of the link text differs from the surrounding text by 3:1.

• The visual presentation of UI components and Graphical objects has a contrast ratio of at least 3:1 against adjacent colour(s)
• Ensure that patterned backgrounds (where used) have at least an 80:20 ratio transparency.

Full Explanation

Mobile devices often have poor colour contrast and are often used in less-than-ideal lighting conditions. As a result, information highlighted in colour may not be visible to users if a feature utilises colour. In that case, the feature should generally be non-colour dependent as well. In particular, do not use blue or purple text, as this may be confused with hyperlinks, especially on devices that do not underline links.

The authors of this document highly recommend rewriting the text to achieve a colour contrast ratio of 7:1 between the text and the background. However, the minimum requirement is lower, that being 4.5:1. We suggest a 7:1 ratio because of screen size, causing the content to be much smaller.

1.4.11 Non-text Contrast (Level AA) ( WCAG 2.2 requirement)

The visual presentation of the following has a contrast ratio of at least 3:1 against adjacent colour(s):

User Interface Components

Visual information used to indicate states and boundaries of user interface components, except for inactive components or where the appearance of the element is determined by the user agent and not modified by the author.

Graphical Objects

Understanding content requires certain parts of graphics, except when a specific graphics presentation is crucial to conveying the information. WCAG 2.0 only mandated specific minimum contrast requirements for text. This criterion now extends requirements to all user interface components (which may be purely graphical), their states, and general graphical objects (such as non-text-based icons).