UI components and graphics need 3:1 contrast

Rule non-text-contrast · Color & contrast · impact moderate · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Controls (inputs, buttons, focus rings) and meaningful graphics must be distinguishable from their surroundings — at least 3:1 against adjacent colors — so users can perceive their boundaries and states.

How to fix#

Make whatever identifies the control contrast at least 3:1 with what surrounds it: a border or outline in a darker color, a fill that differs from the page background, or a visible text label — a control identified by its text needs no extra boundary. Focus rings, checkbox and radio marks, and icons that carry meaning need the same 3:1. A border that only contrasts with the control’s own fill, not with the page behind it, does not count. Disabled controls are exempt.

Example#

<input style="border:1px solid #eee;background:#fff">

<input style="border:1px solid #767676;background:#fff">

WCAG success criteria#

1.4.11 Non-text Contrast — Level AA#

UI components and meaningful graphics need at least 3:1 contrast against adjacent colors.

Understanding 1.4.11

Standards#

This rule contributes to the following standards:

WCAG AA EN 301 549

References#

• WCAG — Non-text Contrast