All WCAG criteria
WCAG 1.4.11 · PerceivableLevel AA

1.4.11Non-text Contrast

UI components (form input borders, buttons, focus indicators) and meaningful graphics must have a 3:1 contrast ratio against adjacent colors.

Common failures

Patterns that fail this criterion.

  • 01Form input borders in `gray-300` on white (often <3:1)
  • 02Button borders that fail against the button background
  • 03Custom focus rings that fail against the focused element
  • 04Icon-only buttons with low-contrast icons
How to test

Testing approach: semi automated.

Some tools detect; manual review is often needed for graphics/icons.

axe-core rules

color-contrast-enhanced
How to fix

Remediation steps.

  1. 1

    Audit form input borders

    Common issue: borders need ≥3:1 against their surroundings (page background, button fill).

  2. 2

    Custom focus indicators

    Focus rings need ≥3:1 against the element they surround AND ≥3:1 against the page background.

  3. 3

    Meaningful icons

    Stand-alone meaningful icons (e.g. close button "X" with no text label) need ≥3:1.

Scan for WCAG 1.4.11 on your site

Find every violation in 42 seconds.

AccessProof runs axe-core 4.9.1 against your site and flags every WCAG criterion with the offending element selector. WCAG 1.4.11 is one of 49 criteria we check on every scan.

Start free auditTry free scanner — no signup
Related criteria

Often appears with…

WCAG 1.4.3 · Level AA

Contrast (Minimum)

All 50 WCAG 2.1 Level A + AA success criteria explained.

View the full checklist