1.4.11 · Level AA · WCAG 2.1 · Perceivable → Distinguishable

Non-text Contrast

UI components (button borders, form field outlines, focus indicators) and meaningful graphics have at least 3:1 contrast against adjacent colors.

Why it matters

A ghost button with a 1.5:1 border, or a focus ring the same colour as the background, is invisible to low-vision users even though the text inside it might pass 1.4.3 fine.

Needs manual testing

axe-core's automated color-contrast rule checks text against its background (1.4.3), not the border/outline contrast this criterion covers — non-text UI contrast generally needs a manual or tooling spot-check today.

Fails

button.secondary {
  background: #ffffff;
  border: 1px solid #eeeeee;
  color: #333333;
}

The #eeeeee border against a white background is close to 1:1 contrast — the button boundary is effectively invisible.

Passes

button.secondary {
  background: #ffffff;
  border: 1px solid #767676;
  color: #333333;
}

#767676 against white is roughly 4.5:1, well clear of the 3:1 minimum for UI component boundaries.

Openwell finds violations like this one across your whole site, clusters them by the component that caused them, and generates a fix that's re-validated before you see it.

Scan your site free