WCAG 1.4.11 — Non-text Contrast, explained with examples

Why this criterion exists

You cannot interact with a button you cannot see. Subtle UI is fashionable but excludes users with low vision from finding form fields, focus rings, and active states.

If you only remember one thing: ui components (form borders, focus indicators, icons that convey meaning) must have at least a 3:1 contrast ratio against adjacent colors. Everything else on this page is detail.

Who feels it when this fails

Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Non-text Contrast affects:

• Low-vision users locating interactive controls

• All users in bright environments

How sites typically fail it

These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.

• Form input borders too faint to distinguish from background

• Focus rings with insufficient contrast (light blue on white)

• Icon-only navigation with low-contrast icons

• Active/inactive tab states distinguished only by subtle hue

How to test for it

• Measure UI element borders with a contrast checker.

• Tab through the page; the focus ring must be clearly visible on every background.

A code fix you can copy

Borders and focus rings need 3:1 minimum. focus-visible avoids showing the ring on mouse click while keeping it for keyboard users.

input { border: 1px solid #ddd; }
button:focus { outline: 1px solid #b6d7ff; }

input { border: 1px solid #94a3b8; } /* 3.4:1 vs white */
button:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }