1.4.11 - Non-text contrast

The intent of this success criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. The requirements and rationale are similar to those for large text in 1.4.3. - Contrast (minimum).

Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the webpage then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.

For active controls any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.

This success criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.

The visual presentation of the following should have a contrast ratio of at least 3:1 against adjacent color(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 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

This is for differentiating graphical objects (such as icons and components of charts or graphs) and author-customized interface components (such as buttons, form controls, and focus indicators/outlines).

Understanding Success Criterion 1.4.11: Non-text Contrast | WAI | W3C

Focused state:

Selected states:

• Identify each user-interface component (link, button, form control) on the page and:
  • Identify the visual (non-text) indicators of the component that are required to identify that a control exists, and indicate the current state. In the default (on page load) state, test the contrast ratio against the adjacent colors.
  • Test those contrast indicators in each state.
• Identify each graphic on the page that includes information required for understanding the content (i.e. excluding graphics which have visible text for the same information, or are decorative) and:
  • Check the contrast of the graphical object against its adjacent colors;
  • If there are multiple colors and/or a gradient, choose the least contrasting area to test;
  • If it passes, move to the next graphical object;
  • If the least-contrasting area is less than 3:1, assume that area is invisible, is the graphical object still understandable?
  • If there is enough of the graphical object to understand, it passes, else fail.
• The techniques below each have testing criteria, and the related criteria for Focus visible (2.4.7), Use of color (1.4.1), and Contrast minimum also have techniques.