WCAG 2.1 · Level AA · Perceivable
1.4.11 Non-text Contrast
Visual information needed to identify user interface components and states, and meaningful parts of graphics, generally needs a contrast ratio of at least 3:1 against adjacent colors. Exceptions include inactive components, unmodified user-agent appearances, decoration, and graphics whose presentation is essential.
Manual verification
How to validate 1.4.11 by hand
Measure contrast for visual information needed to identify controls, states, and meaningful graphical objects.
Start with the extension result
Reopen the reported URL and reproduce the same state (for example, after expanding a menu or submitting a form). Use the result’s Highlight action when available, or its affected-element details and CSS selector, to find the reported content. Apply the checks below to that content and its context. If the element or state has changed, rescan and record that difference before deciding whether the finding still applies.
- Inspect control boundaries, icons, focus indicators, selected/checked states, and graphics needed to understand the content.
- Measure each required visual part against its adjacent color; check for at least 3:1 where the criterion applies.
- Repeat in default, hover, focus, active, error, and disabled states and inspect images, gradients, and themes.
Evidence to record
Record the visual part, adjacent colors, ratio, state, and whether the part is necessary to identify the component or information.
Scope and exceptions
Inactive components, user-agent-controlled appearance, and purely decorative graphics have exceptions. This is non-text contrast and is distinct from text contrast.
Record the review outcome
- Confirmed: the recorded evidence shows the requirement is not met in the tested page state, and no applicable exception explains it.
- Not reproduced: the reported issue is absent in the current state. Record the URL, state, and affected element you checked; this does not prove other pages or states conform.
- Needs more review: evidence is incomplete, the content requires human judgment, or an exception is uncertain. Record what remains to be checked instead of treating it as a pass.
Why it matters
People with moderately low vision may have difficulty distinguishing controls, their states, and meaningful graphical details when those cues blend into nearby colors.
Examples and distinctions
Control boundaries and states
Check the visual cues needed to identify a control or its state, such as a text field boundary or the selected state of a tab. Inactive components and author-unmodified user-agent appearances are treated differently by the criterion.
Meaningful graphics
A chart line or diagram detail that is needed to understand the content needs sufficient contrast against adjacent colors. If the same information is available in another form, such as chart labels and values in text, that graphic detail may not need to meet this requirement.
Text and logos
Text inside a graphic is evaluated under 1.4.3 Contrast (Minimum). The criterion also has an essential-presentation exception; review the normative wording for the exact scope.