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?
- Visual boundary or hit-area of an input field where there is no placeholder (applies to any active interface element)
- States like checked/unchecked states of radio buttons and checkboxes; focus states like a focus indicator (a border or dotted line)
- Graphical objects such as charts, graphs and icons like a left-pointing icon of a “previous” button
are some of the examples of 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.
Points to ponder
- Ensure hit-areas and focus indicators have 3:1 contrast ratio with their inner or outer background
- Ensure the checked/unchecked states meet the 3:1 ratio against their adjacent color in order to distinguish the states
- Ensure parts of graphs and charts where color is the only way to decipher the information, the contrast ratio is met against adjacent colors
- Ensure appropriate color combinations are chosen and defined for UI elements and other graphical objects in the style guides and the design documents in order to avoid uncomfortable retrofitting.
Leave a Reply