Home
:
WCAG Guidelines
:
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

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

Iconography

Test	Priority
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

Typography – Links

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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.

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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