The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- User Interface Components
- Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
- Graphical Objects
- Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
About Success Criterion 1.4.11: Non-Text Contrast
This requirement applies to user interface components and their states, except for inactive components or when the appearance is determined by the user agent and not modified by the content creator. These user interface components are required to meet colour contrast requirements, except when a specific graphic presentation is essential to convey the information.
I disagree with the W3C’s stance that these contrast requirements do not apply to inactive objects. According to their guidelines, inactive buttons and similar elements do not need to meet any color contrast standards. It is common to see inactive items rendered in gray on a white background. Our Mobile Accessibility Guidelines differ from the W3C in that we believe inactive objects should still meet contrast requirements. Our rationale is that inactive elements, such as a disabled “Send” button, provide valuable information, and should be accessible to everyone. For example, a button being inactive because the user needs to fill out required fields should be clearly visible to everyone, regardless of color contrast, ensuring the message – that the fields have not been filled correctly – is accessible to all.
Conversely, if the element is not informationally valuable—meaning it doesn’t communicate anything meaningful—then its presence is unnecessary. If this is the case, then it should be removed for all users – not just those that have colour contrast issues.
However, if the element is informationally valuable then it should be accessible to all – not just those without colour impairments!
An illustrative example is a search field with a magnifying glass icon as the interface component. The icon’s contrast meets the 3 to 1 ratio required for this success criterion — which is below the standard ratio of 4.5 to 1 for text. The mobile committee requires a contrast ratio of at least 4.5 to 1 for all user interface components and graphical objects; whether or not the element contains text, it should be perceivable to everyone.
Resources
- Paciello Group’s Colour Contrast Analyser
- Juicy Studio’s Luminosity Colour Contrast Ratio Analyser
- Mobile Site and Native App Accessibility Testing Guidelines (look for Requirement 3.7 Colour Contrast in the Test Cases documents)
- Mobile Accessibility Testing Guidelines Webinar