Goal
Ensure UI components and meaningful graphics are visually distinguishable from their backgrounds.
Success Criterion · WCAG 1.4.11
Non-text Contrast
The visual presentation of user interface components and graphical objects has a contrast ratio of at least 3:1 against adjacent color(s).
Level AAWCAG 2.1Perceivable1.4 · Distinguishable
Copy button ready
What to do
Meet at least 3:1 contrast for component boundaries, focus indicators, and graphical objects needed to understand content.
Why it matters
Users must be able to perceive controls and graphics; low contrast boundaries make interfaces hard to operate.
Success criterion
What WCAG 1.4.11 requires
Summarized directly from the official Understanding document so teams can quote the requirement accurately.
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components (visual information required to identify components and states, except inactive components); and Graphical Objects (parts of graphics required to understand the content, except when a particular presentation is essential).
Intent
Why WCAG created this requirement
- Users must be able to identify controls and their states visually.
- Graphical information required for understanding must be perceivable.
- This complements text contrast by covering non-text elements.
Benefits
Who gains when you pass
- Low vision users can find inputs, buttons, and focus indicators.
- Users with color vision deficiencies can distinguish icons and chart elements.
- Keyboard users can see focus outlines clearly.
- Touch users can identify tappable boundaries and states.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Inputs may “disappear” if borders are too low-contrast against the background.
Focus indicators may be invisible, preventing keyboard users from tracking location.
Meaningful icons (warning, status) may be missed if their strokes are too faint.
Exception guidelines
Use the WCAG 1.4.11 exceptions correctly
Document the rationale for each exception and note which alternative support you provide.
Inactive components
Disabled/inactive controls are exempt.
Requirement
Inactive controls do not need to meet 3:1 for their identifying visuals.
Decorative graphics
Purely decorative graphics are exempt.
Requirement
If not required for understanding, it may be exempt.
Essential presentation
If a particular presentation is essential to the information, it is exempt.
Requirement
Only when the specific appearance is essential.
Overview
Not only text needs contrast. Interactive controls (like input borders, button outlines, focus indicators, toggles) and meaningful graphical objects (icons, chart lines needed to understand) must also be distinguishable from adjacent colors with at least 3:1 contrast—except for inactive controls and purely decorative visuals.
- Check contrast of component boundaries and essential parts (not necessarily the entire component fill).
- Inactive/disabled components are exempt, but ensure users can still understand them when necessary.
- For charts, ensure essential lines/markers meet 3:1 against background.
- Focus indicators should be high contrast in all themes and states.
Reference: All summaries and highlights originate from Understanding WCAG 1.4.11 and the W3C quick reference.
Fast facts
- Conformance level
- Level AA
- WCAG version introduced
- WCAG 2.1
- Principle
- Perceivable
- Guideline
- 1.4 · Distinguishable
Examples
Make success tangible for teams
Share pass/fail snapshots to coach designers, engineers, QA, and content authors.
Input border
Pass
Input border contrasts ≥ 3:1 against page background.
Fail
Input border is a faint gray that blends into the background.
Focus outline
Pass
Focus ring is clearly visible in both light and dark themes.
Fail
Focus outline uses a low-contrast color and cannot be seen.
Status icon
Pass
Warning icon stroke has ≥ 3:1 contrast against background.
Fail
Status icon uses a pale color and is indistinguishable.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Document border/focus token contrast measurements.
- Capture evidence for key components (input, button, focus ring) showing compliant contrast.
- List any essential graphical exceptions and justification.
Official resources
Deep dives and supporting material
Keep these links handy when writing acceptance criteria or responding to audits.
Understanding 1.4.11
Official W3C interpretation, techniques, and intent for Non-text Contrast.
Quick Reference 1.4.11
Filterable list of sufficient techniques and failures.
Technique G195
Using an author-supplied visible focus indicator.
Failure F78
Failure due to insufficient contrast for graphical objects and UI components.
Implementation checklist
Capture progress and blockers
- Audit UI components: inputs, buttons, toggles, sliders, checkboxes, focus rings.
- Measure contrast of borders/outlines/icons against adjacent colors (≥ 3:1).
- Ensure focus indicators meet 3:1 against adjacent colors in both themes.
- Review charts/graphs and ensure essential elements meet 3:1.
- Avoid low-contrast placeholder-only affordances for inputs.
- Establish design tokens for borders and focus rings that meet requirements.
Testing ideas
Prove conformance with evidence
- Use a contrast tool that supports non-text measurement (sample border color vs background).
- Check focus ring visibility on interactive elements across states.
- Verify form fields are visually identifiable without relying on placeholder text.
- Review icons and chart elements for adequate contrast.
- Test in light/dark modes and on different screens (low-quality displays).
Related success criteria
More from Distinguishable (1.4)
WCAG 1.4.1Use of ColorLevel AWCAG 1.4.2Audio ControlLevel AWCAG 1.4.3Contrast (Minimum)Level AAWCAG 1.4.4Resize TextLevel AAWCAG 1.4.5Images of TextLevel AAWCAG 1.4.6Contrast (Enhanced)Level AAAWCAG 1.4.7Low or No Background AudioLevel AAAWCAG 1.4.8Visual PresentationLevel AAAWCAG 1.4.9Images of Text (No Exception)Level AAAWCAG 1.4.10ReflowLevel AAWCAG 1.4.12Text SpacingLevel AAWCAG 1.4.13Content on Hover or FocusLevel AA