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 under the 1.4.3. Contrast (minimum) criterion.

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.

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 not 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).

For each user inteface component (link, button, form control):

• identify the visual (non-text) indicators that indicate that a control exists as well as that control's current state
  • for the default (on page load) state, test the contrast ratio against the adjacent colors
  • test the contrast ratios for indicator's each state (on focus, selected, etc)

• 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 the contrast is less than 3:1, assume that area is invisible - determine whether the graphical object is still understandable
    
  • If there is enough of the graphical object to understand, it passes, else fail.

Exclude graphics which have visible text with the same information or are decorative in nature.