What 1.4.11 requires
Visual information needed to identify user interface components and their states, and the parts of graphics needed to understand content, must have a contrast ratio of at least 3:1 against adjacent colors. It's the non-text counterpart to 1.4.3, which covers text. If the only thing showing where a text field is, or whether a checkbox is checked, is a pale grey line, that line has to meet 3:1. This is a plain-language summary. The normative text, including every exception, is in the W3C Recommendation, with the W3C's explanation in Understanding 1.4.11 (opens in a new tab) [1][2].
Exceptions and scope:
- Inactive components: disabled controls are exempt.
- Browser defaults: components whose appearance is determined by the user agent and not modified by the author are exempt.
- Essential presentation: graphics where a particular presentation is essential to the information (a photo, a logo, a heat map whose colors are the data) are exempt.
- No boundary required: W3C's Understanding document notes that the criterion doesn't require controls to have a visible boundary. A text-only button can pass without a border; but if a border or fill is the only thing identifying the control, it must meet 3:1.
- Text isn't covered here: text and images of text fall under 1.4.3 Contrast (Minimum).
Why it matters
People with low vision or reduced contrast sensitivity, and anyone using a phone in sunlight, rely on edges and marks to find controls. A form whose fields are drawn with light-grey borders on white can look like a page of floating labels. A focus ring in a pastel brand color can be technically present and practically invisible. Charts that separate series only by thin, low-contrast lines lose their meaning.
Common failures
Input borders too faint to find the field
A light-grey border is the only thing that shows where the field is.
/* Fails */
.field { border: 1px solid #e0e0e0; background: #fff; }
/* Better */
.field { border: 1px solid #767676; background: #fff; }Custom checkbox whose checked state is low contrast
The tick or fill that shows 'checked' is a pale tint of the background.
/* Fails */
.check:checked { background: #dbe7ff; }
/* Better */
.check:checked { background: #1a5fd0; } /* plus a visible tick */Focus indicator that fails against its background
A focus ring exists but blends into the page or the component.
/* Fails */
:focus-visible { outline: 2px solid #ffd7a8; }
/* Better */
:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }Icon-only control drawn in a low-contrast tint
A search or close icon is the only cue that the control exists.
/* Fails */
.icon-btn svg { fill: #c4c4c4; }
/* Better */
.icon-btn svg { fill: #595959; }Can automated testing check 1.4.11?
No. axe-core maps no rules to 1.4.11. Telling which pixels identify a control or carry a graph's meaning, and which colors are adjacent, needs a person.
| axe-core 4.13.0 rule | What it checks |
|---|---|
| (none mapped) | axe-core 4.13.0 maps no rules to this criterion |
What automation can't decide: Which visual parts are required to identify a component or its state, what counts as the adjacent color (inside fill, outside background, or both), whether a chart's meaning survives, and whether a focus or hover state is perceivable. axe-core's color-contrast rule checks text only (1.4.3).
A clean automated result is never proof that 1.4.11 is met. See why sites pass axe-core but fail real screen reader users.
How to test it by hand
- Make a list of every control type on the page (fields, buttons, checkboxes, radios, toggles, sliders, tabs) and every informative graphic.
- For each control, identify what shows that it exists and what shows its state (border, fill, tick, underline, focus ring).
- Measure those parts against their adjacent colors with a contrast checker or a browser color picker. They need at least 3:1.
- Tab through the page and measure the focus indicator against the component and the background it sits on.
- For charts and icons, ask whether the information is still there if you only look at the parts that meet 3:1, or whether text labels, patterns or data tables carry it too.
New to screen readers? Start with how to test a website with a screen reader and how to test keyboard-only navigation.
How Accessible helps (and where it stops)
Honestly, very little directly. Accessible doesn't measure non-text contrast today: scans run axe-core, which has no 1.4.11 rule, and journeys judge what is announced and where focus goes, not how things look. The closest signal is real-user monitoring's observer for focus that isn't visible, which flags the most severe end of the problem, an indicator that's absent, in real sessions (real-user monitoring).
Where it stops: Accessible won't tell you whether a border, icon or focus ring meets 3:1. That needs a manual check with a contrast tool, and a person to decide which parts are required to identify the component. No automated tool, ours included, can certify that a criterion is met.
Related criteria
Sources
- Understanding Success Criterion 1.4.11: Non-text Contrast (opens in a new tab). W3C Web Accessibility Initiative. Accessed October 18, 2026.
- Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 1.4.11 (opens in a new tab). W3C Recommendation. Accessed October 18, 2026.
- axe-core rule descriptions (opens in a new tab). Deque Systems, axe-core 4.13.0. Accessed October 18, 2026.
Meeting a success criterion is not the same as legal compliance, which depends on the rules that apply to you. No automated tool can certify conformance.