Skip to content
aulys.app · accessibility 100read the statement
Aulys

WCAG 1.4.11 · Level AA

What contrast do buttons and icons need?

User-interface components and meaningful graphics need at least 3:1 contrast against adjacent colors (WCAG 1.4.11, AA). That covers button borders, input outlines, icons, focus rings, and chart elements — not just text.

What it is

Non-text contrast is the contrast of interactive boundaries and meaningful graphics, separate from text contrast.

Why it matters

If a button's edge or an input's border is too faint, users can't tell the control apart from the background.

How to fix it

  1. 01Give component boundaries (borders, outlines) at least 3:1 against their surroundings.
  2. 02Ensure icons that carry meaning meet 3:1.
  3. 03Don't rely on a 1px hairline that disappears against the page.

How Aulys catches it

Aulys measures the contrast of borders, icons, and focus rings in your frame, not only the text.

Scan your first frame free