WCAG 2.2 Demo SuiteNon-text Contrast
User interface components and meaningful graphical objects have a contrast ratio of at least 3:1 against adjacent colours — input borders, focus indicators, icons, and chart elements.
Who this affects
Low-vision users who can read the label but cannot see where the input box ends, whether a checkbox is ticked, or which element has focus.
The failure and the fix
Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.
Fails 1.4.11
Open the failing example in a new tab
fail.html — the problem
<h1>Preferences</h1>
<!-- FAILURE 1: the input border is 1.1:1 against the page. The LABEL is
perfectly readable, so 1.4.3 passes - but a low-vision user cannot see
where the box begins or ends, or that there is a box at all.
1.4.11 exists precisely because 1.4.3 only covers text. -->
<div class="field">
<label for="nm">Display name</label>
<input type="text" id="nm" class="ghost-input ghost-focus">
</div>
<!-- FAILURE 2: the focus indicator is 1.4:1 against the background.
It technically exists, so 2.4.7 Focus Visible is arguably met - but you
cannot see it, so 1.4.11 fails. -->
<p>Tab to the field above and look for the focus ring.</p>
<!-- FAILURE 3: a toggle whose track and knob are both near-white. Nothing
communicates on or off except a shade change nobody can perceive. -->
<p><span class="toggle" role="img" aria-label="Toggle, currently off"></span> Email me about events</p>
<!-- FAILURE 4: a meaningful icon at 1.2:1. Icons that convey information are
"graphical objects" and are in scope. -->
<p><span class="icon-faint" aria-hidden="true">★★★★☆</span> Rated 4 out of 5</p>Meets 1.4.11
Open the passing example in a new tab
pass.html — the fix
<h1>Preferences</h1>
<!-- FIX 1: the input boundary is 4.5:1 against the page - comfortably over the
3:1 the criterion requires. The threshold is 3:1, not 4.5:1, because
shapes are easier to perceive than letterforms. -->
<div class="field">
<label for="nm">Display name</label>
<input type="text" id="nm" class="solid-input">
</div>
<!-- FIX 2: a focus indicator at 8:1 and 3px thick. It clears 1.4.11 for
contrast, 2.4.7 for visibility, and 2.4.13 at AAA for size. -->
<p>Tab to the field above — the focus ring is unmistakable.</p>
<!-- FIX 3: the toggle's track has a visible border and its knob contrasts with
the track, so both the control's boundary and its state are perceivable. -->
<p><span class="toggle" role="img" aria-label="Toggle, currently off"></span> Email me about events</p>
<!-- FIX 4: a meaningful icon at 6.9:1, with the rating also given in text -
which is 1.4.1 Use of Color doing its job alongside this criterion. -->
<p><span class="icon-strong" aria-hidden="true">★★★★☆</span> Rated 4 out of 5</p>
<!-- What is in scope for 1.4.11:
- the boundary of any control you need to see to use it
- the visual state of a control (checked, selected, current)
- the parts of a graphic you need to understand it: chart bars,
map pins, meaningful icons
What is NOT: decorative graphics, inactive controls, logotypes, and
anything where a particular presentation is essential.
Automated coverage here is very thin. Expect to measure most of this by
hand with a colour picker. -->How to test it
Check the boundary of every control against its background, in every state. Check icons that convey meaning and the parts of charts needed to understand them. Pure-white input fields on a white page are the most common failure.
-
Automated
Very limited automated coverage. Most non-text contrast must be measured by hand with a colour picker.
No axe rule maps to this criterion. It has to be checked by a person.
-
Keyboard
Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.
-
Screen reader
Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.
-
Visual
Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.
Related criteria
In the specification
- Understanding 1.4.11 Non-text Contrast — the W3C explanation, intent and exceptions
- 1.4.11 in the WCAG 2.2 Recommendation — the normative wording