How-to · Accessibility
How to check non-text contrast of buttons and UI components
The short answer
WCAG 1.4.11 requires 3:1 contrast for the parts of UI components you need to perceive — input borders, focus rings, meaningful icons — measured against their adjacent colors. Sample each pair with Contrast Checker's eyedropper on the live page and read the ratio: 3:1 or better passes. Button labels are text and still need 4.5:1.
- 1
List the operable components on the page: inputs, buttons, checkboxes, toggles, icons and focus indicators.
- 2
Open the Contrast Checker popup and sample each component's defining color against its adjacent background with the eyedropper.
- 3
Read the ratio: 3:1 or better passes WCAG 1.4.11.
- 4
Tab through the page and test the states too — focus rings, checked and error states fail most often.
- 5
Fix failures by adjusting lightness, and remember button label text needs 4.5:1 separately.
WCAG's contrast rules don't stop at text. Success criterion 1.4.11 — non-text contrast — requires at least 3:1 for the visual information you need to identify and operate UI components: input borders, focus indicators, checkboxes, toggles and icons that carry meaning. It's the rule audits miss most often, because a page can have flawless text contrast while its form fields fade into the background. Checking it takes the same free tool: Contrast Checker's popup, sampling colors straight from the live page in Chrome.
What must pass 3:1 — and against what
Non-text contrast is measured against adjacent colors. An input identified by its border needs that border at 3:1 against the page background. A focus ring needs 3:1 against what surrounds it. An icon that is the only way to understand a control — a lone magnifying glass, a trash can — needs 3:1 against its own background. Buttons are subtler: WCAG doesn't force a button's fill to hit 3:1 against the page as long as the button is otherwise identifiable, but its label is text and still needs 4.5:1 against the fill, and its focus indicator still needs 3:1.
What's exempt
Disabled controls, purely decorative graphics, and components whose appearance is the browser default (an unstyled native checkbox) don't have to pass. And there is no stricter tier to chase: unlike text, non-text contrast has no AAA criterion — 3:1 is the whole rule, at Level AA.
Sample the two adjacent colors in the popup
Open the Contrast Checker popup on the page and use the eyedropper to sample the pair that actually defines the component: border against page background, icon against its fill, focus ring against whatever it sits on. The popup computes the ratio locally and shows the verdicts — 3:1 or better clears 1.4.11. Sampling the rendered pixels matters here even more than for text, because borders are routinely drawn with semi-transparent colors that end up lighter than the stylesheet suggests.
Test states, not just the resting look
Most non-text failures live in states. Tab through the page and sample the focus indicator — a pale outline on a white page is the classic miss. Then check checked, selected and hover states, and any validation border that turns a subtle red. Each state's indicator needs the same 3:1 against its adjacent colors.
Honest limits apply here too
A component sitting on a gradient, a photo or a soft shadow has no single adjacent color, so Contrast Checker reports it as unmeasurable rather than inventing a ratio. Sample the lightest and darkest points behind it and make the component pass against both. Everything runs locally under activeTab — the extension reads a page only when you invoke it, and no color leaves your browser.