1.4.11 Non-text Contrast (Level AA) — WCAG 2.1
WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast (Level AA): what it requires, a common e-commerce accessibility failure, and how to fix it.
This is educational technical reference content, not legal advice. It explains what WCAG 2.1 requires and how to meet it — not whether a specific site carries legal risk. Compliance with WCAG, the ADA, or any other accessibility law or standard is a legal determination; consult qualified counsel for legal risk assessment.
WCAG 2.1 guidelines hub → Perceivable → 1.4.11 Non-text Contrast
1.4.11 Non-text Contrast (Level AA)
What it requires: UI component boundaries (button outlines, input borders, focus indicators, toggle states) and meaningful graphical elements need at least 3:1 contrast against adjacent colors.
Common failure: A checkout “Continue” button has no visible border and a background color close to the page background, making its clickable boundary nearly invisible against the surrounding UI.
Fix it: Ensure interactive element boundaries and focus indicators meet 3:1 against their immediate surroundings, checked separately from text contrast (1.4.3). See the color contrast guide for more on this criterion specifically.
In 1.4 Distinguishable: ← 1.4.10 Reflow · 1.4.12 Text Spacing →
↑ Back to Perceivable overview
This is educational technical reference content, not legal advice. It explains what WCAG 2.1 requires and how to meet it — not whether a specific site carries legal risk. Compliance with WCAG, the ADA, or any other accessibility law or standard is a legal determination; consult qualified counsel for legal risk assessment.
This page was drafted with AI assistance and reviewed by a person for accuracy before publication.