WCAG 1.4.11 Non-Text Contrast in Plain English

Most people know the text contrast rule: body text needs a 4.5:1 ratio against its background, and large text needs 3:1. WCAG 1.4.11 Non-text Contrast, at Level AA, extends a similar idea to everything that is not text: the borders that show a form field exists, the icons that carry meaning, the check inside a checkbox, the focus outline, and the parts of a chart you need to read it. The ratio here is 3:1 against adjacent colors.

The rule matters for people with moderately low vision. A form field whose border blends into the page background is invisible to them. A chart whose slices differ only in pale shades is unreadable. Contrast for non-text content is about whether the thing can be found and understood at all.

Key takeaways

• Non-text contrast requires 3:1 against adjacent colors for interface components and meaningful graphics.
• For a control, measure the visual information that identifies it and its state: border, icon, check, or focus indicator.
• Inactive controls, such as disabled buttons, are exempt from the rule.
• A focus indicator must contrast with the background it sits on when the control is focused.
• Do not round contrast values: 2.999:1 does not meet 3:1.

The two halves of the rule

The criterion covers two kinds of visual information. User interface components are the controls: buttons, text inputs, checkboxes, radio buttons, sliders, and select menus. For each one, the visual information required to identify the component and its states must reach 3:1 against adjacent colors. That includes the border that marks a text field, the check that marks a checkbox as selected, and the thumb that marks a slider position.

Graphical objects are the meaningful parts of graphics: the slices of a pie chart, the lines of a line graph, the icons that carry information. Parts of a graphic that are required to understand the content must also reach 3:1 against adjacent colors. Pure decoration is not covered, and a graphic whose exact presentation is essential to its meaning is exempt. A photograph of a sunset, for example, is not measured slice by slice, because its presentation is the content.

The word "adjacent" does the heavy work in both halves. You do not measure a border against some distant page color. You measure it against the color right next to it. A dark border on a dark background fails even if the same border would pass on white. A light grey input border on a white page is the classic failure: it looks fine at a glance and vanishes for a reader with low vision.

Borders, icons, and state indicators

A control does not always need a visible border. W3C is clear on this point: if a control has visible content, such as text or a contrasting icon, that identifies its presence, a boundary marking the hit area is not required. A button whose text is plainly visible passes without a border. But when a boundary is the only thing showing where a control is, that boundary must reach 3:1.

Text inputs are the everyday case. W3C gives a passing example: a standard text input with a grey border of #767676 against white outside the control. A lighter grey, such as #CCCCCC on white, falls short of 3:1 and fails. If your form fields look like faint outlines, measure them. The fix is usually a darker border, not a redesign.

State indicators follow the same logic. The check inside a checked checkbox must contrast with the box around it. A pale check on a pale box fails even if the box border itself passes. The selected state of a radio button, the filled portion of a progress bar, and the arrow showing a menu is open all count as state information and all need 3:1 against what sits next to them.

Icons need the same treatment when they carry meaning. A trash icon that deletes an item, a star that marks a favorite, and a warning triangle that signals an error are all graphical objects when their meaning matters. Their color must reach 3:1 against the background. An icon that is purely decorative, with its meaning already given in nearby text, is not measured.

Focus indicators deserve their own check

A focus indicator is the outline or highlight that appears when a control receives keyboard focus. Under 1.4.11, combined with 2.4.7 Focus Visible, that indicator must have enough contrast against the adjacent background when the control is focused. W3C gives a passing example: a grey focus indicator of #949494 against white, which meets 3:1.

The measurement depends on where the indicator sits. An indicator drawn outside the component is measured against the page background. An indicator drawn inside is measured against the component's own colors. An indicator that changes the border must contrast with both the inside and the outside where it replaces the border. A common failure is a pale yellow outline on a white page: it looks like a highlight to a sighted designer and disappears for a reader with low vision.

Thin lines are a trap here. Because of anti-aliasing, thin shapes can render fainter on screen than their defined color suggests. W3C advises avoiding very thin lines for non-text elements, or using colors that exceed the minimum, so the rendered result still passes. A 1 pixel pale outline is a risk even when the math says it passes.

What is exempt, and what is not

Three exemptions keep the rule fair. Inactive components, such as disabled buttons and greyed out form fields, are not required to meet contrast requirements. A disabled submit button that looks washed out is not a failure of 1.4.11, because the control cannot be used in that state.

Appearance determined by the user agent, and not modified by the author, is also exempt. A browser's default rendering of a control, left untouched, is the browser's responsibility. The moment you restyle that control, the contrast becomes yours to check.

Essential presentation is the third exemption, for graphics. When a particular presentation is essential to the information, such as a heat map where color itself encodes value, the rule does not demand a presentation that would destroy the meaning. That exemption is narrow. It does not cover a chart that could have used darker slices or labels and simply did not.

Note what is not exempt: hover effects that are purely supplemental do not need 3:1 on their own, because the pointer itself shows the hover state. But a hover treatment must never strip contrast from the control or its focus indicator. And the rule does not compare focused and unfocused states against each other. It compares each state against its adjacent colors.

How to measure without guessing

Pick a contrast checker that reports ratios, then enter the two adjacent colors exactly. For a text input, enter the border color and the page background color. For a checkbox check, enter the check color and the box fill. For a focus indicator, enter the indicator color and the background it sits on. Record the ratio. If it reads 2.999:1, it fails: W3C states computed values should not be rounded.

When a color fails, darken it until it passes, then check the text that sits on it still passes its own 4.5:1 rule. Changing one color can break another ratio, so recheck the pair together.

How Axeazy helps with this exact issue

Color contrast is detected by the scan, and a WCAG correct color is calculated, but a visible color change is never applied without the owner approving it first. That approval step matters here, because contrast fixes change how a site looks. Read the honest scope on the capabilities page, and read how the scan works to see how findings are recorded with a date and time.

For the wider WCAG 2.2 picture, read the WCAG 2.2 vs 2.1 guide and the target size guide, which covers the size rule that sits beside this contrast rule. The pinch to zoom guide covers zoom, which helps readers with low vision in a different way.

Want a quick read on your own site? Run Axeazy's free 60 second scan . It needs no signup.

Last checked: October 30, 2026.

FAQ

Does 1.4.11 apply to text?

No. Text contrast is covered by 1.4.3 Contrast (Minimum), which asks for 4.5:1 for normal text and 3:1 for large text. Criterion 1.4.11 covers non-text content: interface components and meaningful graphics, at 3:1.

Do disabled buttons need 3:1 contrast?

No. Inactive components, such as disabled controls, are exempt from 1.4.11. The exemption covers controls that are visible but cannot currently be used.

What if my chart uses color to encode data?

If a particular presentation is essential to the information, that part is exempt. But the exemption is narrow: a chart that could use darker colors, patterns, or labels should do so rather than relying on pale shades alone.

Can Axeazy change my colors automatically?

No. The scan detects contrast problems and calculates a correct color, but a visible color change is never applied without your approval first. You review the suggested color and approve it before anything changes.

Sources

• W3C Understanding Success Criterion 1.4.11: Non-text Contrast, checked October 30, 2026
• W3C Understanding Success Criterion 2.5.8: Target Size (Minimum), checked October 30, 2026
• Axeazy capabilities, checked October 30, 2026
• Axeazy methodology, checked October 30, 2026