Published November 10, 2026

WCAG 1.4.11 Non-text Contrast, Level AA

Does WCAG require 3:1 contrast for buttons and icons?

Yes at Level AA for the visual information needed to identify user interface components and their states, and for graphical objects required to understand the content. Success criterion 1.4.11 Non-text Contrast requires a contrast ratio of at least 3:1 against adjacent colors. The text is in the W3C WCAG 2.2 Recommendation.

What parts of the UI need 3:1?

Boundaries of inputs and buttons when the edge is how you see the control, icons that convey meaning, chart segments needed to read the data, and focus or selected states that are shown only visually. The W3C explanation is in Understanding Success Criterion 1.4.11. Inactive controls, pure decoration, and logotypes are exceptions. Whether color alone conveys the state is a separate Level A check on the use of color page.

How is 1.4.11 different from text contrast?

1.4.3 Contrast (Minimum) covers text and images of text: 4.5:1 for normal text and 3:1 for large text. 1.4.11 does not change those numbers. A button label still needs text contrast under 1.4.3. The button’s border or icon may also need 3:1 under 1.4.11. The text ratios are covered on the color contrast page.

Do focus indicators and hit targets both need contrast?

A visible keyboard focus indicator is required under 2.4.7, covered on the focus visible page. That indicator’s contrast against adjacent colors falls under 1.4.11. How large the control must be is a different criterion on the target size page. A control can be large enough and still fail if its only edge is a pale gray below 3:1.

Does the Title II web rule include non-text contrast?

Yes. The Department of Justice rule for state and local government websites names WCAG 2.1 Level AA. That level includes 1.4.11. Governments with a population of 50,000 or more have until April 26, 2027. Smaller governments and special districts have until April 26, 2028. Who must comply is on the Title II web rule page. A scanner often catches flat text-on-background failures and misses a light border or a focus ring on a busy background. A person checks that, which is why a passing score is not conformance, as covered on the scanner page. The fix belongs in the design tokens and templates, which is remediation.