1. Home
  2. :
  3. WCAG Guidelines
  4. :
  5. 1.4.11 Non-Text Contrast – Level...

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.

Understanding Success Criterion 1.4.11: Non-text Contrast

Additional Resources

In detail: 1.4.11 Non-Text Contrast (User Interface Components) by Eric Eggert

Checklist – System Foundations

Content

TestPriority
Does everything required to understand the content have a contrast ratio of at least 3:1 against their background?High

Iconography

TestPriority
Do all clickable images have a contrast ratio of at least 3:1 against their background?High
Do all clickable images have a focus indicator with a contrast of at least 3:1 against their background?High
Are all meaningful SVGs styled to ensure compatibility with Windows High Contrast mode?Medium
TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Checklist – Components

Accordions

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Audio – Controls

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Breadcrumbs

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Buttons

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High
Are all meaningful SVGs styled to ensure compatibility with Windows High Contrast mode?Medium

<canvas> elements

Warning!
Before using <canvas> elements, read Using <canvas> accessibly.
TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components in the canvas have a focus indicator with a contrast of at least 3:1 against their background?High
Are all <canvas> elements styled to ensure compatibility with Windows High Contrast mode?Medium

Cards

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Charts and Infographics

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable images have a focus indicator with a contrast of at least 3:1 against their background?High
Are all meaningful SVGs styled to ensure compatibility with Windows High Contrast mode?Medium
Does everything required to understand the content have a contrast ratio of at least 3:1 against their background?High

Custom components

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Drag-and-drop components

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Forms

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Image maps

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable images have a focus indicator with a contrast of at least 3:1 against their background?High
Are all meaningful SVGs styled to ensure compatibility with Windows High Contrast mode?Medium

Information Bubbles

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Forms

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Global Header

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Local Navigation

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Menus

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Tabsets

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Trees

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Video – controls

TestPriority
Do all clickable components have a contrast ratio of at least 3:1 against their background?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High