1.4.11 Non-text Contrast

1. What is the goal of this criterion?

Imagine you want to shop online, but the form fields have such faint borders that you can barely tell them apart from the background. Or you’re analyzing an important chart for work, but the lines blur together because they hardly stand out from the background.

People with vision impairments face exactly these problems every day – but so do people without disabilities in poor lighting or with tired eyes. So the goal of Success Criterion 1.4.11 is clear: it’s not just text that needs sufficient contrast, but also the visual elements people need to operate or understand content.

2. What exactly does it require?

Specifically, it requires a contrast ratio of at least 3:1 against adjacent colors. This covers two areas:

User interface components:

• Visual information needed to identify controls and their states
• For example borders of form fields, checkboxes, toggles, icon buttons and states such as focused, selected or checked
• Exempt: inactive components and components whose appearance is entirely determined by the browser and not modified by you

Graphical objects:

• Parts of graphics required to understand the content
• For example lines and bars in charts or informative icons
• Exempt: graphics where a particular presentation is essential – such as logos, photos, flags or heat maps

An important difference from text contrast: it’s about “adjacent colors”, not just foreground and background. So a pie chart segment must stand out from the background and from neighboring segments – or the segments must be distinguishable through separator lines or labels.

Text itself is still covered by Contrast (Minimum), and color alone must never carry information anyway (see Use of Color).

3. Why does it matter for accessibility?

Imagine having to fill in an online form where the input fields are almost invisible. Or interpreting a chart where you can’t make out the data points. That’s how people with vision impairments experience low contrast.

Sufficient non-text contrast makes content accessible because it:

• Enables people with low vision to find and use controls
• Improves orientation on websites, even in poor lighting
• Makes information in graphics and charts accessible to more people
• Helps people with color vision deficiencies notice important visual differences
• Improves usability with tired eyes or on small screens

And finally, it makes your website more robust – including for people without disabilities looking at their phone in the sun or sitting tired at the computer in the evening.

4. How to meet the criterion

Meeting this criterion requires a shift in thinking: from “looks nice” to “works for everyone”. Here are some proven tips:

Give controls the right contrast:

• Measure with tools such as the Colour Contrast Analyser or the WebAIM Contrast Checker
• Pay special attention to form fields: if only a border makes the field identifiable, that border needs 3:1 against the background
• Focus indicators are a state and need 3:1 against adjacent colors – Focus Appearance sets stricter requirements
• Buttons with text: if the text clearly identifies the button, the button’s border doesn’t need 3:1 – but the text must meet 1.4.3
• States such as “selected” on checkboxes or tabs must differ from the unselected state or background by 3:1 – or be identifiable another way, such as a checkmark

Optimize graphics and charts:

• Separate adjacent areas in charts from each other (3:1 or separator lines)
• Don’t rely on color alone; use patterns, line styles or direct labels too
• Icons: the informative shapes must stand out from the background
• For complex infographics: check each informative element individually

Practical aids:

• A design system with predefined, contrast-checked color pairs for borders, icons and states
• Regular tests with color vision deficiency simulators and in grayscale
• Checks in dark mode and in every state (hover, focus, active, selected)

Understand the exceptions:

• Logos may keep their original colors
• Photos and realistic depictions are exempt
• Inactive (disabled) controls are exempt – but should still be recognizable as such
• Unmodified default browser controls are exempt; once you style them, the requirement applies

5. Why this criterion matters for businesses

Non-text contrast isn’t a nice-to-have – it’s one of the basics of usable interfaces.

1. Improve user experience and conversions

Form fields that people can see get filled in. Buttons that people recognize get clicked. Charts that people can read persuade. When controls disappear into the background, you lose people on the way to their goal.

2. Part of the legal benchmark

Non-text contrast was added at Level AA in WCAG 2.1 – and WCAG 2.1 Level AA, via EN 301 549, is the technical benchmark under the European Accessibility Act. Building the criterion into your design system from the start saves costly rework.

3. Strengthen your brand and professionalism

Clearly recognizable controls signal quality and care. Accessible design shows that you take all users seriously.

Last but not least: legal requirements. The European Accessibility Act (Directive (EU) 2019/882) has applied since 28 June 2025 to many consumer products and services, such as online shops and banking services; in Germany it is implemented by the Barrierefreiheitsstärkungsgesetz (BFSG). Public sector bodies are covered by the Web Accessibility Directive (EU) 2016/2102. This section is general information, not legal advice.

6. The success criterion in the W3C’s words

Success Criterion 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.

In short: anything needed to identify controls and their states or to understand graphics must have a contrast ratio of at least 3:1 against adjacent colors – with exceptions for inactive components, unmodified browser controls and essential presentations.