Category: Visual and Media Accessibility

Non-text Contrast

Also known as: WCAG Success Criterion 1.4.11, SC 1.4.11, 1.4.11 Non-text Contrast

Simply put

Non-text Contrast is a WCAG accessibility requirement that important visual elements, such as buttons, form field borders, icons, and parts of charts, stand out clearly enough from the colors around them. The goal is to help people with low vision or reduced color perception identify and use interface controls and understand meaningful graphics, not just read text. It commonly calls for a contrast ratio of at least 3:1 against adjacent colors.

Formal definition

Non-text Contrast is WCAG 2.1 Success Criterion 1.4.11 (Level AA), added in WCAG 2.1, which requires that the visual presentation of user interface components (states and boundaries needed to identify a control) and graphical objects (parts of graphics required to understand the content) have a contrast ratio of at least 3:1 against adjacent color(s). This 3:1 threshold aligns with the minimum contrast required for larger-scale text. Contrast may vary across a single non-text element, for example, one side of a control or a wedge in a pie chart may differ from an adjacent color, and each meaningful boundary should meet the ratio. Where a component (such as a text link or icon) provides no visual indication of its interactive boundary or hit area, there is generally no additional contrast requirement beyond that of the text or icon itself. Verifying this criterion requires manual evaluation, since automated tools can detect only a portion of non-text contrast issues. This entry is not legal advice; consult qualified counsel and current agency guidance for compliance obligations in a given jurisdiction.

Why it matters

Many interfaces convey critical information through visual elements rather than text alone. Buttons, form field borders, focus indicators, toggle states, icons, and the segments of charts all communicate meaning that users must be able to perceive to complete tasks. When these elements have insufficient contrast against adjacent colors, people with low vision or reduced color perception may be unable to locate a form field, tell whether a control is active, or distinguish the wedges of a pie chart from one another. Non-text Contrast addresses this gap by extending contrast expectations beyond text to the graphical objects and interface components that carry essential information.

Added in WCAG 2.1 as Success Criterion 1.4.11 at Level AA, this requirement recognizes that a visually well-designed page can still be functionally unusable if its controls and meaningful graphics blend into the background. A light-gray input border on a white background, a faint focus outline, or a chart that relies on subtly different pastel colors can each create real barriers. Because AA is the conformance level most commonly cited as a target in accessibility policies and referenced in litigation and settlements as a benchmark, 1.4.11 is frequently part of the criteria organizations aim to satisfy, though meeting it does not by itself guarantee an accessible experience or immunity from legal claims.

It is worth noting that contrast can vary within a single element. As WebAIM describes, one side of a control may differ from an adjacent color, and a wedge in a pie chart may need to be distinguishable from the wedges beside it. Each meaningful boundary must be evaluated individually, which is why this criterion often requires careful, case-by-case review rather than a single measurement.

Who it's relevant to

UX and visual designers

Designers make the color and border decisions that determine whether controls and graphics meet the 3:1 ratio. Building this requirement into design systems, component libraries, and chart palettes early helps avoid retrofitting later, and encourages choices that remain distinguishable for users with low vision or reduced color perception.

Front-end developers

Developers implement focus indicators, field borders, control states, and iconography, all of which fall within the scope of 1.4.11. Ensuring these rendered elements maintain adequate contrast against their adjacent colors, including in hover, focus, and active states, is part of translating accessible design intent into working code.

Accessibility engineers and QA testers

Because automated tools detect only a portion of non-text contrast issues, testers must perform manual evaluation to identify which boundaries and graphical distinctions are meaningful and measure them individually. This is especially important for complex graphics such as charts, where contrast can vary within a single element.

Compliance officers and legal counsel

1.4.11 is a Level AA criterion added in WCAG 2.1, and AA is the level most commonly cited as a target in accessibility policies. Those assessing conformance should understand that satisfying this criterion supports but does not guarantee legal compliance, and that obligations vary by jurisdiction and evolve through regulation and case law. This entry is not legal advice; consult qualified counsel and current agency guidance.

Content authors working with data visualizations

Anyone producing charts, graphs, or informational graphics needs to ensure that the parts required to understand the content are distinguishable from adjacent colors. Since a single graphic may contain multiple adjacent regions, such as pie chart wedges, each meaningful boundary should be considered against the 3:1 threshold.

Inside Non-text Contrast

Success Criterion 1.4.11 (Non-text Contrast)

A WCAG success criterion introduced in WCAG 2.1 at Level AA that addresses the contrast of non-text visual elements. It is carried forward in WCAG 2.2. It complements, but is distinct from, the text-focused contrast requirements of Success Criterion 1.4.3 (Contrast Minimum).

3:1 minimum contrast ratio

The criterion generally calls for a contrast ratio of at least 3:1 between the relevant visual elements and adjacent colors, a threshold commonly cited when evaluating whether non-text elements are perceivable.

User interface components

Visual information needed to identify interactive components and their states, such as the boundary of a button, the border of a form input, or a focus indicator. Contrast is generally measured against adjacent colors for the parts required to perceive and operate the control.

Graphical objects

Parts of graphics required to understand the content, such as the lines in a chart, segments of an icon, or meaningful shapes. Purely decorative elements and content where a particular presentation is essential are commonly treated as out of scope.

Adjacent color comparison

Contrast for these elements is generally evaluated against the colors immediately adjacent to them, which may include a background, a neighboring state, or surrounding graphic areas rather than only a page background.

Common questions

Answers to the questions practitioners most commonly ask about Non-text Contrast.

Does Non-text Contrast require a 4.5:1 contrast ratio like text?

No. The 4.5:1 ratio commonly associated with text applies to the text contrast success criteria at Level AA. Non-text Contrast (Success Criterion 1.4.11, added in WCAG 2.1 at Level AA) generally requires a minimum contrast ratio of 3:1 for user interface components and graphical objects needed to understand content. Confusing the two thresholds can lead to over- or under-designing interface elements.

Does Non-text Contrast apply to every visual element on a page, including decorative graphics?

No. The criterion generally applies to visual information needed to identify user interface components and states, and to parts of graphics required to understand the content. Purely decorative elements, and elements whose appearance is determined by the browser or otherwise outside the author's control, are commonly treated as out of scope. Inactive or disabled components are also generally excepted.

Which parts of a button or form field need to meet Non-text Contrast?

The visual boundaries or indicators that a user relies on to perceive the component and its state are the focus. For a form field, this may mean the visual boundary that distinguishes the field from its surroundings; for a button, it may mean the visual indication of the interactive area. Where the component's appearance is fully conveyed by adjacent text within a sufficiently contrasted container, the specific approach can vary, so evaluating what a user needs to identify the component is generally the practical starting point.

How do focus and hover states factor into Non-text Contrast?

Visual indicators that convey a component's state, such as focus, are among the graphical information the criterion addresses. Designers commonly ensure that state indicators meeting the 3:1 threshold remain distinguishable against adjacent colors. Note that focus visibility is also addressed by separate success criteria, so meeting Non-text Contrast alone does not guarantee those related requirements are satisfied.

Can automated tools confirm compliance with Non-text Contrast?

Automated tools can detect only a portion of potential issues and often struggle to identify which graphical objects are required to understand content or which boundaries a user relies on to perceive a component. Manual review, including judgment about what information is essential, is generally required. Automated results should be treated as a starting point rather than a determination of conformance.

How should Non-text Contrast be handled for icons that convey information?

Where an icon or part of a graphic is needed to understand the content or to identify a control, the relevant visual portions generally need to meet the 3:1 ratio against adjacent colors. If the same information is also conveyed through adequately contrasted text, the graphic itself may not carry the full burden. Evaluating each graphic against what the user must perceive to understand or operate it is the common approach.

Common misconceptions

Non-text Contrast uses the same thresholds as the contrast requirements for text.

The text-focused criterion (1.4.3, Contrast Minimum) commonly references higher ratios such as 4.5:1 for normal text, while Non-text Contrast (1.4.11) generally references a 3:1 minimum. They are separate success criteria with different scopes and should be evaluated independently.

Non-text Contrast has always been part of WCAG.

It was added in WCAG 2.1 and is not present in WCAG 2.0. When assessing conformance, practitioners should confirm which WCAG version is being targeted, since older 2.0-based baselines do not include this criterion.

Meeting the 3:1 ratio guarantees the interface is usable and legally compliant.

Meeting a WCAG success criterion supports conformance but does not by itself guarantee an accessible experience for all users or immunity from legal claims. Automated tools detect only a portion of contrast issues, so manual review and assistive technology testing are generally needed, and legal questions should be directed to qualified counsel.

Best practices

Ensure that boundaries, borders, and other visual cues needed to identify user interface components meet at least a 3:1 contrast ratio against adjacent colors.

Provide focus indicators and component states (such as hover, selected, or error states) with sufficient contrast so they remain perceivable.

Evaluate meaningful parts of graphical objects, such as chart lines and icon shapes, and exclude only elements that are genuinely decorative or where a specific presentation is essential.

Measure contrast against the colors actually adjacent to each element rather than assuming a single page background applies everywhere.

Combine automated contrast checks with manual inspection and assistive technology testing, since automated tools detect only some non-text contrast issues.

Confirm the targeted WCAG version and level (this criterion is Level AA, added in WCAG 2.1 and retained in WCAG 2.2), and consult qualified legal counsel for jurisdiction-specific compliance questions, as this guidance is not legal advice.