Non-text contrast ensures that visual elements users rely on, other than text, are clearly visible. This includes controls, focus indicators, icons, and graphics that communicate meaning. When these elements use low-contrast colors, many users with low vision or reduced contrast sensitivity may not perceive them at all.
This success criterion extends contrast requirements beyond text to include visual cues necessary for operating or understanding content. In practical terms, this criterion most often applies to borders, outlines, icons, and indicators, not decorative visuals.
WCAG Success Criterion
1.4.11 Non-text Contrast (Level AA)
The visual presentation of the following must have a contrast ratio of at least 3:1 against adjacent colors:
User Interface Components
Visual information required to identify components and their states, except for inactive components or where appearance is controlled by the user agent.
Graphical Objects
Parts of graphics are required to understand the content, except where a specific presentation is essential.
3:1 is a hard threshold. A ratio of 2.99:1 fails.
Who This Helps
This criterion primarily supports users who:
- Have low vision
- Have reduced contrast sensitivity
- Use screen magnifiers or browser zoom
- Have certain color vision deficiencies
Low-contrast controls are often missed entirely, not just harder to see.
What Counts as Non-Text Content
Non-text content includes any visual cue that is not plain text but is required to understand or operate the interface, such as:
- Input borders and outlines
- Checkbox and radio indicators
- Icons without text labels
- Focus and selection indicators
- Toggle handles and slider tracks
- Lines and markers in charts
Simple decision test
If users must see the visual cue to understand or use the interface, it must meet 3:1 contrast.
User Interface Components
Unless a control is inactive, any visual information required to identify:
- that a control exists
- How can it be operated
- its current state (focused, selected, checked, expanded)
must meet a 3:1 contrast ratio against adjacent colors.
This includes:
- Input borders
- Checkbox ticks and radio dots
- Dropdown arrows
- Toggle handles
- Author-defined focus indicators
Important: Borders, outlines, and icon glyphs are part of the user interface component and must be evaluated for contrast.
Important clarification
The criterion does not require different states to contrast with each other. Each state must simply contrast with its adjacent background.
Adjacent Colors (What to Measure Against)
“Adjacent colors” are the colors directly next to the visual cue.
Examples:
- An input border on a white page → compare against the page background
- A toggle on a colored panel → compare against the panel color
- A focus outline outside a button → compare against the surrounding background
Decorative shadows and gradients may be ignored unless they interfere with recognition.
Focus Indicators
When authors customise focus styles, those indicators must meet the 3:1 requirement.
Focus indicators may be:
- Outside the component (outline)
- Inside the component (inner border)
- Partially inside and outside
In all cases, the visible indicator must contrast with whatever it touches. Default browser focus styles are exempt unless overridden.
Graphical Objects
Graphical objects must meet contrast requirements only if they are required for understanding.
Examples include:
- Icons without text alternatives
- Chart lines, markers, and slices
- Diagram symbols
Only the essential parts of the graphic must meet 3:1.
Exempt graphics
- Decorative images
- Logos and brand marks
- Graphics with equivalent visible text
- Visuals where a specific presentation is essential
Text inside graphics must still meet 1.4.3 Contrast (Minimum).
Gradients and Thin Shapes
Gradients and thin strokes often fail due to anti-aliasing.
When testing:
- Measure the least contrasting area
- Avoid very thin lines for essential indicators
- Prefer color combinations that exceed 3:1
Example:
A #ccc border on a white background is ~1.6:1 → Fail
A #767676 border on white is ~4.5:1 → Pass
Best practice is to exceed the minimum whenever possible. These can be done by using tools such as the Color Contrast Checker.
Hover States
Hover styles are not required to meet 3:1 because the pointer location already indicates hover.
However:
- Hover styles must not reduce contrast
- Focus and selection indicators must remain visible
- Hover effects must not obscure other states
Hover alone does not help keyboard users. Focus visibility is critical.
Common Failures
- Very light input borders on white backgrounds
- Low-contrast focus outlines
- Icon-only buttons that blend into their background
- Checkbox indicators that do not reach 3:1
- Charts where lines or slices cannot be distinguished
A common misconception: “If users can guess what an icon means, contrast doesn’t matter.”
This is false. Guessability does not replace perceivability.
Rule Description
All user interface components and graphical objects required for understanding or operation must have a minimum contrast ratio of 3:1 against adjacent colors, except where explicitly exempt.
The Algorithm
- Identify non-text visual elements
- Ask whether users must see them to understand or operate the interface
- Ignore decorative or inactive elements
- Measure contrast against adjacent colors
- Confirm a minimum ratio of 3:1
- If essential visuals are hard to perceive, the criterion fails
Note: Many automated tools do not reliably detect non-text contrast failures. Manual visual inspection is often required.
Wrapping Up
Non-text contrast prevents users from missing controls, states, and essential graphics. If a visual cue is required for understanding or interaction, it must be clearly visible against its surroundings. If removing contrast would make users hesitate, guess, or miss the element entirely, the design fails this criterion.
