What contrast ratio do buttons need for WCAG AA?

3:1 against the adjacent background under criterion 1.4.11 (Non-text Contrast). The text label on the button also needs 4.5:1 under criterion 1.4.3 for normal text size.

Do icons need to pass contrast?

Yes, if the icon conveys information. Decorative icons are exempt. Informational icons (navigation icons, warning signs, state indicators) need 3:1 against their background.

What counts as the 'adjacent background' for a button?

The color immediately surrounding the button on the page — typically the page background or a card background. The button's own background color does not count; it is the contrast of the button against what surrounds it.

WCAG Contrast for Buttons and UI Components

Most designers know that text needs a 4.5:1 contrast ratio for WCAG AA compliance. Fewer know that buttons, form fields, icons, and focus indicators have their own contrast requirement under a separate criterion — and that this requirement is frequently violated even on products that pass basic text contrast checks.

Criterion 1.4.11 — Non-text Contrast

WCAG 2.2 criterion 1.4.11 (Non-text Contrast, Level AA) requires that the visual presentation of user interface components and graphical objects achieve at least 3:1 contrast against adjacent colors. This applies to any UI element that users need to identify and interact with:

Button backgrounds and borders
Checkbox and radio button outlines
Input field borders
Slider tracks and thumbs
Informational icons (close, menu, arrow, warning)
Chart bars, line graph lines, and data visualization elements
Toggle switch tracks and handles

The criterion applies to each visual indicator that communicates the nature, state, or boundaries of the component — not to the entire element as a visual object.

What "adjacent color" means in practice

The contrast ratio is measured between the component's visual indicator and the color immediately surrounding it. For a button, this means:

If the button has a solid background and no border: the button background color against the page background color.
If the button has a border: the border color against the page background. The button's own fill does not need to contrast against the page background if the border provides the visual boundary.
If the button has no visible boundary and relies on background fill: the fill must achieve 3:1 against the surrounding page color.

Ghost buttons — buttons with only a thin border and transparent fill — must have that border achieve 3:1 against the page background. A subtle border on a ghost button is one of the most common 1.4.11 failures.

Focus indicators — criterion 2.4.11 (WCAG 2.2 addition)

WCAG 2.2 added criterion 2.4.11 (Focus Appearance, Level AA) which specifies requirements for keyboard focus indicators. To pass, the focus indicator must:

Have a focus indicator area of at least the perimeter of the unfocused component multiplied by 2 CSS pixels (this favors thick outlines over thin ones).
Have at least 3:1 contrast change between the focused and unfocused states.
Not be entirely hidden by content created by the author.

This means a 2px solid focus ring that is a different color from the background typically passes if the color change achieves 3:1. A 1px dotted outline in a subtle grey almost never passes. The default browser focus indicator often passes in 2024+ browser versions, but custom focus styles reset to thin outlines frequently fail.

Common button contrast failures

These are the patterns most often flagged in UI component audits:

Mid-grey ghost button border on white: A border color like #CCCCCC on #FFFFFF achieves only 1.6:1 — well below the 3:1 threshold. This pattern is extremely common in secondary action buttons.
Brand-colored button on a brand-colored section background: A button that achieves 3:1 on a white page may fail if placed on a colored hero section or card background of a similar hue.
Subtle checkbox outlines: Default form inputs styled with a light grey border (#D1D5DB) on white achieve only 1.4:1. This is a near-universal failure in component libraries that prioritize visual lightness.
Icon-only navigation: A light grey icon on white in a navigation bar — common for secondary or inactive states — typically fails 3:1. Active and focused states need to clearly distinguish themselves from inactive states as well.

How to fix button and UI contrast failures

The 3:1 threshold is considerably easier to achieve than the 4.5:1 text requirement. For most failures, a minor adjustment resolves the issue:

Ghost button borders: darken the border from a subtle grey to at least #767676 (which achieves exactly 4.48:1 on white — above the 3:1 UI component threshold with significant headroom).
Icon colors: move from a light grey like #9CA3AF to a medium grey like #6B7280 or darker. This change is often visually imperceptible in context but passes the criterion.
Form field borders: use a border color of at least #767676 on white backgrounds. At 4.48:1, this gives a clear visual boundary while remaining lighter than body text.
Focus rings: use a 3px solid outline in a color that achieves 3:1 against the page background. A black outline on white exceeds this easily. A color-matched focus ring (same hue as the brand primary, darkened to L ≈ 30%) is a good aesthetically-consistent choice.