Understanding SC 1.4.11 Non-text Contrast
Success Criterion 1.4.11 Non-text Contrast (Level AA): 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.
Modern design practices heavily rely on visual presentations for identification of active user interface components and dissemination of data. But users with moderately low vision have difficulty in distinguishing the visual indicators of active UI elements; their states and graphical objects where colors are the only way to identify and interpret data.
This success criterion sets out to ensure that the luminosity contrast of such elements meet a minimum contrast ratio of 3:1 with their adjacent color. This will ensure ease of navigation and operability for low vision users without the need for any contrast enhancing tools.
What are visual indicators?
Note that all such visual indicators must meet the 3:1 ratio if no textual representation or solid alternatives are present.
Adjacent colors
For any UI components, an adjacent color is the color that is close to the component itself. For a better understanding, let’s take the example given in the understanding document:
For an input field with dark border, white internal background and white external background, the external background is the adjacent color. If there are multiple colors, choose only the colors that prevent the users in distinguishing the elements to measure the contrast ratio.
Exceptions
This success criterion does not force the authors to have visual boundary or a visual indicator. It applies to only the visual boundaries, focus states and other states. Aslo, if a chart displays the values or has a conforming alternatives, this SC is not applicable there too.
