About

Version: WCAG 2.1+
Number: 1.4.11
Level: AA
Applicability:
  • Forms
  • Graphics
  • Icons
  • User Controls
Requirement:

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.

Guidance:

Purpose

The purpose of this success criterion is to ensure that there is sufficient contrast in meaningful graphics and images, and in user interfaces, so that users with low vision can distinguish and understand them.

How to Meet

Meeting this requirement is generally the same as meeting 1.4.3 Contrast (Minimum) except that it applies to graphics and user controls instead of text.

When a graphic contains objects that a user needs to discern to understand the content (e.g., the slices in a pie chart or bars or lines in a graph), those objects must have a contrast of 3:1 with their background. Note that this requirement does not apply when the necessary information is available in another form (e.g., if a pie chart lists the purpose and value of each slice, the contrast between slices is not relevant).

This requirement also applies to icons used to identify content. Textbooks, for example, often use icons to differentiate different types of asides. Similar to graphics, if the icons are supplementary to a text label, the requirement does not apply (i.e., the requirement applies only when the information is not available in another form).

The requirement also applies to user interface components such as buttons and controls.

Additional Information

The following knowledge base pages provide more information about how to address this success criterion for publishing content: