• Success Criterion 1.4.11
  • Conformance level AA

1.4.11 · Non-text Contrast

Lesson overview · Non-text Contrast

In plain language

Controls and meaningful graphics (input borders, icons, focus outlines, chart lines) need 3:1 contrast against what's next to them.

Who it affects

Low-vision and color-blind people who need to perceive controls and meaningful graphics.

How to check

Use a contrast checker on input borders, checkboxes, icons, focus outlines, toggles, chart elements — including hover/checked/selected states. Worked example — A crowdfunding platform's campaign page: measure the visual marker for a selected state (tab underline, active card border) against its background: 3:1 minimum.

Common misconception

People assume 1.4.3's text contrast rules cover everything. This is a separate rule for non-text elements, borders, icons, focus outlines, that has its own, lower 3:1 threshold. Real example: on a food-delivery app's order-tracking screen, cSS removes or hides the focus outline (outline:none / border removal) with no replacement — keyboard users can't see where they are on the page.

Learn more

get in touch

Know where you stand. Know what to work on next.

Tell us what you’re working on and where you need support. Our accessibility specialists can help with audits, remediation, VPAT/ACR, accessible development, and ongoing compliance.

Free 30-minute consultation (opens in new tab)

Free 30-minute call: talk through where you stand, scope a project or get a quote.

Need technical answers now? Book the $100 one-hour consultation to walk through an audit, talk with a developer or review your site live.

Let’s find the barriers before your users do

Indicates a required field.


Your information is kept private and never shared with third parties.

Scenarios in this lesson