Non-text Contrast

In brief

A pale gray border around a text field looks elegant, but a person with low vision may not see that there is a field at all. The same is true for an icon button, a checkbox, a chart line or a focus ring that blends into its background.

This criterion requires a contrast ratio of at least 3:1 against adjacent colors for the visual information needed to identify user interface components and their states, and for graphical objects needed to understand the content.

What does it cover?

• User interface components: The boundary or other visual cue that identifies a control: a text field border, a checkbox, a radio button, a toggle, a button with no text label.
• States: Focus indicators, selected and checked states, and pressed or expanded states, where the state is shown only by color or shape.
• Graphical objects: The parts of icons, charts and diagrams that are needed to understand the content, such as chart lines, bars and meaningful icons.
• Not required: Disabled controls, components whose text already identifies them, pure decoration, and logos or brand marks.
• A button with a text label: If the text identifies the button, the button border does not need 3:1. The text still needs 4.5:1 under 1.4.3.
• Out of scope: Text contrast is 1.4.3. Not relying on color alone is 1.4.1. Focus visibility itself is 2.4.7, and the size of focus indicators is 2.4.13 (Level AAA).

Who does it affect?

People with low vision, with color vision differences, or with age-related vision changes who need to see where controls are and what state they are in. Anyone using a screen in bright light or on a poor display.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Visible, distinguishable controls and graphics are part of "perceivable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 1.4.11 by reference and turns it into separate clauses for each kind of ICT.

Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 1.4.11 is the same in WCAG 2.1 and 2.2. It is a Level AA criterion.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. Form field borders

If the border is the only thing that shows where the field is, it needs 3:1 against the page background.

input { border: 1px solid #cccccc; } /* 1.61:1 on white, fails */

input { border: 1px solid #767676; } /* 4.54:1 on white */

2. Icon-only buttons

An icon that carries the meaning needs 3:1 against its background. It still needs an accessible name.

.icon-btn svg { fill: #aaaaaa; } /* 2.32:1 on white, fails */

.icon-btn svg { fill: #6b6b6b; } /* 5.33:1 on white */

<button class="icon-btn" aria-label="Search">…</button>

3. Custom checkboxes

When you replace the native control, keep a border or fill with 3:1 contrast and show the checked state clearly.

.box { border: 2px solid #dddddd; } /* 1.36:1, fails */

.box { border: 2px solid #767676; }
.box.checked { background: #0b5fff; border-color: #0b5fff; }

4. Focus indicator

The outline must contrast with the colors next to it.

a:focus { outline: 2px solid #dddddd; } /* 1.36:1 on white, fails */

a:focus-visible { outline: 3px solid #0b5fff; outline-offset: 2px; } /* 5.13:1 */

5. Charts

Lines and bars that carry data need 3:1 against the chart background. Add labels or patterns so color is not the only cue (1.4.1).

<path stroke="#cccccc" d="…" /> <!-- 1.61:1, fails -->

<path stroke="#6b6b6b" stroke-width="2" d="…" /> <!-- 5.33:1 -->
<text x="300" y="40">Sales</text>

6. State by color only

If a toggle changes only from light gray to a slightly different light gray, the change is not visible. Make the states differ by at least 3:1.

.toggle { background: #e0e0e0; }
.toggle.on { background: #d0d0d0; }

.toggle { background: #767676; }
.toggle.on { background: #2e7d32; } /* the thumb position also changes */

Code examples for mobile

In native apps, check the borders of custom fields, icon tints and selected states in both light and dark mode. System controls already follow the platform contrast rules.

iOS (SwiftUI)

import SwiftUI

struct SearchField: View {
    @State private var text = ""

    var body: some View {
        HStack {
            Image(systemName: "magnifyingglass")
                .foregroundStyle(Color("ControlStroke")) // at least 3:1 on the background
                .accessibilityHidden(true)
            TextField("Search", text: $text)
        }
        .padding(12)
        .overlay(
            RoundedRectangle(cornerRadius: 8)
                // Avoid: Color.gray.opacity(0.2), which is far below 3:1
                .stroke(Color("ControlStroke"), lineWidth: 1)
        )
    }
}

Android (Jetpack Compose)

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.runtime.*

@Composable
fun SearchField() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Search") },
        colors = OutlinedTextFieldDefaults.colors(
            // Use theme colors whose pair you have checked for 3:1
            unfocusedBorderColor = MaterialTheme.colorScheme.outline,
            focusedBorderColor = MaterialTheme.colorScheme.primary
        )
    )
}

How to test

• Find every control: List the fields, buttons, checkboxes, toggles, tabs, icons and chart elements on the page.
• Measure the visual cue: Use a color picker or contrast checker on the border, icon or fill against the adjacent color. It should be at least 3:1.
• Check all states: Default, hover, focus, checked, selected, expanded and error. The state change must be visible at 3:1.
• Check the focus ring: Tab through the page. Can you always see where focus is, on both light and dark backgrounds?
• Check graphics: Do chart lines, bars and meaningful icons stand out from the background at 3:1?
• Test dark mode: A pair that passes in light mode can fail in dark mode.
• Use a checker as a starting point: Automated tools cannot tell which parts of a component are needed to identify it. A person has to decide.

Common mistakes

• Light gray input borders: The most common failure of this criterion.
• Placeholder text instead of a visible field: If the field has no visible boundary, users cannot find it.
• Icons in pale gray: Meaningful icons need 3:1.
• Focus rings that disappear on some backgrounds: Check on every background the component appears on.
• Chart lines in similar tints: Neighboring lines need to be distinguishable from each other as well as from the background.
• Toggles that look the same on and off: State must be visible.
• Treating disabled as an excuse: Only truly disabled controls are exempt.
• Forgetting dark mode: Dark themes often use dim borders.

Sources

• Understanding SC 1.4.11: Non-text Contrast (W3C), opens in a new tab
• G195: Using an author-supplied, highly visible focus indicator (W3C), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.