WCAG 1.4.11 Non-text Contrast is a Level AA success criterion that requires important user interface components, states, and graphical objects to have at least a 3:1 contrast ratio against adjacent colors when that visual information is necessary to identify the component or understand the content. It covers non-text elements such as form field boundaries, meaningful icons, selected states, focus indicators, and essential parts of charts or graphics.
This guide explains WCAG 1.4.11 in practical terms, shows where the 3:1 requirement applies, compares it with WCAG 1.4.3 for text, and provides examples and a testing checklist.
WCAG 1.4.11: Non-text Contrast
WCAG 1.4.11, Non-text Contrast, is a Level AA criterion introduced in WCAG 2.1. Its purpose is to make important visual information distinguishable for people who have low vision or reduced contrast sensitivity.
The core requirement is simple: visual information that a user needs in order to recognize a user interface component, understand its state, or interpret a meaningful graphical object generally needs a contrast ratio of at least 3:1 against adjacent colors.
This is different from text contrast. WCAG 1.4.11 is about non-text visual information: borders, icons, states, controls, and graphics.
What WCAG 1.4.11 applies to
WCAG 1.4.11 applies when visual contrast is necessary to perceive information or identify an interactive component. Common examples include:
- Form input borders when the border is necessary to recognize the input field
- Checkboxes, radio buttons, toggles, sliders, and other controls
- Selected, checked, expanded, pressed, or active states
- Focus indicators used to show keyboard focus
- Icons that communicate meaning or function
- Meaningful lines, shapes, segments, or data points in charts and graphs
- Visual boundaries that distinguish one interactive component from its surroundings
The criterion does not require every decorative shape or visual detail to reach 3:1. The key question is whether the visual information is needed to identify, operate, or understand the interface or content.
The 3:1 contrast requirement
For non-text contrast, the important threshold is 3:1. The relevant visual part of the component or graphic must have at least a 3:1 contrast ratio against the adjacent color or colors that a user must distinguish it from.
That means you should test the actual colors that form the visual boundary. For example, if a light gray input border appears on a white background, measure the border against white. If the border is the only cue showing where the field begins and ends, a ratio below 3:1 can create a WCAG 1.4.11 failure.
Form fields and input borders
Form fields are one of the most common WCAG 1.4.11 issues. Designers often use very light gray borders because they look subtle, but subtle boundaries can become difficult to perceive.
If the border is necessary to identify an input, textarea, dropdown, checkbox, or other control, the visual boundary should provide at least 3:1 contrast against the adjacent background.
A field may not need a contrasting border if another visual treatment clearly identifies it. For example, a strong fill color that contrasts with the page background can define the field even if the border itself is low contrast. Test the visual information users actually rely on.
Icons and graphical objects
Icons that communicate meaning are also covered. Examples include search icons, error icons, expand/collapse indicators, required-field symbols, map markers, and graphical controls.
If the icon is necessary to understand or operate the interface, the meaningful parts of the icon generally need at least 3:1 contrast against adjacent colors.
The same principle applies to graphical objects such as chart lines, data points, bars, or regions when users need those visual elements to understand the data. Decorative graphics that convey no information are not the target of this criterion.
Focus indicators
Keyboard users need a visible way to determine which interactive element currently has focus. A focus ring, underline, outline, border, or other visual indicator must remain distinguishable from its surroundings.
When evaluating a focus indicator under WCAG 1.4.11, check the colors immediately adjacent to the indicator. A brand-colored outline may look noticeable in isolation but become difficult to perceive when placed on a similar background or against the control itself.
WCAG 2.2 also includes additional focus-related criteria, so a complete WCAG 2.2 AA review should not rely on 1.4.11 alone.
Selected, checked, and other component states
WCAG 1.4.11 also matters when a visual change communicates state. Examples include:
- A selected tab changing from gray to blue
- A checkbox showing a check mark
- A toggle changing position or color
- An active navigation item receiving an underline or border
- An accordion icon changing direction when expanded
- An invalid field receiving an error border
If the state is communicated by a meaningful graphical change, the changed visual information must remain perceivable. Do not rely on a tiny low-contrast color shift as the only indication that a control is selected or active.
Examples that pass WCAG 1.4.11
- A text input with a dark gray border on white where the border-to-background contrast is at least 3:1
- A checkbox with a clearly visible check mark that contrasts at least 3:1 with the checkbox background
- A focus outline that remains clearly distinguishable from both the component and surrounding page
- A meaningful icon whose visible shape reaches at least 3:1 against the adjacent background
- A chart whose important lines and data points remain distinguishable without depending on very low-contrast color differences
Examples that fail WCAG 1.4.11
- A pale gray input border on a white page when that border is the only way to recognize the field
- A selected tab indicated only by a barely darker background that does not reach 3:1 against the unselected state
- A focus ring that blends into the page background
- A meaningful icon rendered in very light gray against white
- Chart series that cannot be distinguished because essential graphical elements have insufficient contrast
A common pattern is that nearby label text passes WCAG 1.4.3 while the form control itself fails WCAG 1.4.11. Text compliance does not automatically make the full interface compliant.
WCAG 1.4.11 vs WCAG 1.4.3
These two contrast criteria solve related but different problems:
| Criterion | Main scope | Typical requirement |
|---|---|---|
| WCAG 1.4.3 Contrast (Minimum) | Text and images of text | 4.5:1 for normal text and 3:1 for qualifying large text |
| WCAG 1.4.11 Non-text Contrast | User interface components, states, and meaningful graphics | 3:1 against adjacent colors |
In practical terms, 1.4.3 is primarily about reading text, while 1.4.11 is about perceiving non-text interface and graphical information.
What is WCAG contrast?
Contrast ratio compares the relative luminance of a foreground color and a background color. WCAG expresses the result as a ratio such as 4.5:1 or 3:1. Higher ratios create a stronger luminance difference between colors.
Contrast testing is numeric. A design can look visually attractive and still fail. Measure rendered colors instead of judging by eye or relying only on a design token name such as “medium gray.”
WCAG 1.4.3 Contrast (Minimum)
WCAG 1.4.3 is a Level AA criterion for text and images of text.
- Normal text: at least 4.5:1 against its background
- Large text: at least 3:1
What counts as large text?
WCAG defines large text as at least 18 point, or 14 point bold. In CSS this is commonly approximated as 24px regular or 18.66px bold. Test the rendered result rather than relying only on a token name or design-file value.
What content is exempt?
Do not treat exemptions as a blanket excuse for low-contrast UI. WCAG criteria contain specific exceptions, and they must be applied narrowly.
- Inactive or disabled controls: some requirements treat inactive components differently
- Decorative graphics: purely decorative visual information is not the target of 1.4.11
- Logos and brand marks: logo text has a specific exception under text contrast rules
- Incidental text: text that is not intended to be read as normal content may fall under a text-contrast exception
Placeholder text that functions as the only label should not be assumed to be incidental. If users need to read it to understand the field, it needs adequate contrast and the form still needs an accessible label.
Text over images
For text placed over photographs, gradients, or video, measure the text against the actual pixels behind it. Overlays, scrims, or solid text containers are often needed to keep contrast stable across different parts of an image.
Dark mode
A color pair that passes in a light theme may fail in dark mode, and the reverse is also possible. Test each theme independently, including default, hover, focus, selected, checked, active, error, and disabled states.
How to test WCAG 1.4.11
- Identify meaningful non-text visuals. List controls, boundaries, icons, focus indicators, states, charts, and graphics users need to perceive.
- Determine the adjacent colors. Identify the background or neighboring color that the visual information must be distinguished from.
- Measure the contrast ratio. Use browser DevTools, Colour Contrast Analyser, or another reliable contrast checker.
- Test every state. Review default, hover, focus, active, selected, checked, expanded, error, and dark-mode variants.
- Test the rendered page. Opacity, overlays, gradients, anti-aliasing, and inherited styles can change the actual visible color.
- Review automated results manually. Automated tools can identify some contrast failures, but they cannot reliably determine whether every graphical object or UI boundary is necessary for understanding.
For a broader testing strategy, see automated vs manual accessibility testing.
WCAG 1.4.11 checklist
- Form field boundaries are visible and reach 3:1 where needed to identify the control
- Checkboxes, radio buttons, toggles, sliders, and similar controls remain distinguishable
- Meaningful icons reach 3:1 against adjacent colors
- Selected, checked, active, expanded, and pressed states remain perceivable
- Focus indicators remain clearly visible against adjacent colors
- Meaningful chart and graph elements are distinguishable
- Default, hover, focus, active, error, and dark-mode states are tested separately
- Low-contrast color changes are not the only way important state information is communicated
- Text contrast is tested separately under WCAG 1.4.3
- Automated contrast checks are supplemented with manual review
WCAG 2.1 vs WCAG 2.2
WCAG 1.4.11 remains part of the contrast requirements used in WCAG 2.1 and WCAG 2.2. WCAG 2.2 adds other criteria that affect controls and focus behavior, but it does not replace the 3:1 non-text contrast requirement.
For a broader version comparison, see WCAG 2.1 vs WCAG 2.2.
Need contrast, forms, keyboard access, and component states reviewed together? Start with a website accessibility audit.