Understanding WCAG SC 1.4.11 Non-text Contrast

Success Criterion 1.4.11 Non-text Contrast (Level AA): 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.

Modern design practices heavily rely on visual presentations for identification of active user interface components and dissemination of data. But users with moderately low vision have difficulty in distinguishing the visual indicators of active UI elements; their states and graphical objects where colors are the only way to identify and interpret data.
This success criterion sets out to ensure that the luminosity contrast of such elements meet a minimum contrast ratio of 3:1 with their adjacent color. This will ensure ease of navigation and operability for low vision users without the need for any contrast enhancing tools.

What are visual indicators?

Adjacent colors

For any UI components, an adjacent color is the color that is close to the component itself. For a better understanding, let’s take the example given in the understanding document:
For an input field with dark border, white internal background and white external background, the external background is the adjacent color. If there are multiple colors, choose only the colors that prevent the users in distinguishing the elements to measure the contrast ratio.

Exceptions

This success criterion does not force the authors to have visual boundary or a visual indicator. It applies to only the visual boundaries, focus states and other states. Aslo, if a chart displays the values or has a conforming alternatives, this SC is not applicable there too.

Points to Ponder

Related Reads

• Color Palette Contrast Checkers Roundup
  A curated list of color palette contrast checkers from around the web, use these tools to check or generate color palettes that are accessible.
• WCAG Color Contrast Checker by DigitalA11Y
  The WCAG color contrast checker is a simple to use tool the help you test if the foreground and background color meets necessary WCAG requirements. It also provides a comprehensive insight if the colors chosen meet the necessary contrast requirements and if they can be perceived by color blind users with Protanomaly, Protanopia, Deuteranomaly, Deuteranopia, Tritanomaly, Tritanopia, Achromatomaly, Achromatopsia.
• Understanding SC 1.4.1 Use of Color
• Understanding SC 1.4.3 – Contrast Minimum
• For User Interface Component contrast: Using an author-supplied, highly visible focus indicator
• For graphics with sufficient contrast: Ensuring that a contrast ratio of 3:1 is provided for icons
• For text in or over graphics :
  Ensuring that a contrast ratio of at least 4.5:1 exists between text and background
  Ensuring that a contrast ratio of at least 3:1 exists between text and background
  Providing a control for users to switch to a view with sufficient contrast
  Using sufficient contrast for images that convey information – Draft
• For People with Low Vision: Accessibility Requirements for People with Low Vision
• Understanding SC 1.4.11 – Non-text Contrast by W3C