1.4.11 Non-text Contrast (AA)

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

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.

User Interface Components

For controls on the page, such as buttons and form fields, the visual boundaries of the component 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 adjacent background of the component.

Note: This success criterion does not require that controls have a visual indicator, but that if there is an indicator, it has sufficient contrast.

Note: User Interface Components that are disabled are not required to meet the color contrast requirements of this success criterion.

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.

Note: Only graphics conveying meaning are required to have contrast with its surrounding.

Note: If the meaning in the icon has sufficient contrast on its own (for example, white text on a blue background), the contrast between the background if the icon and the background behind the icon are irrelevant.