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#

Give component borders/indicators at least 3:1 contrast against the adjacent background.

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