1.4.11 Non-text Contrast

In Plain Language

UI components (form fields, buttons, checkboxes) and meaningful graphical objects (icons, charts) must have at least a 3:1 contrast ratio against their adjacent background. This criterion is separate from text contrast (1.4.3) -- it covers the visual boundaries and shapes of non-text elements that users need to perceive and interact with.

Why It Matters

A form field with a very light gray border on a white background can be invisible to users with low vision, making it impossible to locate where to type.
Icon buttons that lack sufficient contrast against their background become unusable for users who cannot perceive them clearly.
Custom checkboxes, radio buttons, and toggle switches need visible boundaries so users can identify their state (checked vs. unchecked).
This applies to any visual indicator that conveys meaning -- chart segments, progress bars, focus indicators, and status icons all need adequate contrast.

Examples

Do: Form field with sufficient border contrast

/* Good: border has 3.9:1 contrast against white */
input {
  border: 1px solid #6b7f8e;
}

/* The border defines the UI component boundary */
/* and must meet 3:1 against adjacent colors */

Don't: Light gray borders that disappear

Do: Icons meeting 3:1 contrast

Don't: Icons that disappear on light backgrounds

How to Fix It

Check border contrast on all form fields. The border (or other visual indicator) that defines the boundary of inputs, selects, and textareas must have at least 3:1 contrast against the adjacent background.
Audit icon colors to ensure all meaningful icons meet 3:1 contrast. Decorative icons that do not convey information are exempt.
Consider all states -- focus, hover, active, disabled, and selected states must all maintain sufficient contrast for any visual indicator that conveys meaning.
What counts as a UI component? Buttons, links, form fields, checkboxes, radio buttons, sliders, tabs, toggles, and any other interactive element where the visual boundary or indicator is necessary for perception.
Use the same contrast tools you use for text contrast (WebAIM, DevTools color picker, axe) -- just apply the 3:1 threshold instead of 4.5:1.