Accessibility Testing Procedure

Non-Text Contrast

Guideline

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.

Intent

The intent of this guideline 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 Web page then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.

Active User Interface Components

For active controls on the page, such as buttons and form fields, any visual boundary that indicates the component's hit area (the region where a pointer can activate the control) must have sufficient contrast with the adjacent background. Also, the visual effects which indicate state, such as whether a component is selected or focused, must also provide the minimum 3:1 contrast with the background adjacent to the component.

This success criteria does not require that controls have a visual boundary indicating the hit area, but that if there is an indicator then it has sufficient contrast. If only the text (or icon) is visible and there is no visual indication of the hit area, then there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)) or icon contrast covered by the Graphical Objects portion of this Success Criteria. Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.

Regardless of the whether or not there is a visible boundary for the button, the focus indicator for the component must have sufficient contrast when the component is focused.

User Interface Components that are not available for user interaction (eg: a disabled control in HTML) are not required to meet this color contrast requirements in WCAG 2.1. An inactive user interface component is visible but not currently operable. Example: A submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.

Graphical Objects

The term "graphical object" applies to stand-alone icons such as a print icon (with no text), and the important parts of a more complex diagram such as each line in a graph. For simple graphics such as single-color icons the entire image is a graphical object. Images made up of multiple lines, colors and shapes will be made of multiple graphical objects, some of which are required for understanding.

Not every graphical object needs to contrast with its surroundings - only those that are required for a user to understand what the graphic is conveying. Gestalt principles such as the "law of continuity" can be used to ignore minor overlaps with other graphical objects or colors.

Finding and Inspecting Applicable Components

• Identify each user-interface component (link, button, form control) on the page and:
  • Identify the visible boundaries of the component that indicate it is a component and test the contrast ratio against the adjacent colors.
  • Identify the state indicators and test the contrast ratio against the adjacent colors.
• 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, chose 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.

Failure Conditions

• If any tests within the Finding and Inspecting Applicable Components section results in a failure:
  • Fails 1.4.11 Non-text Contrast