Non-text Contrast
User-interface components and graphical objects required to understand the content must have at least 3:1 contrast ratio against adjacent colors.
What it requires
WCAG 2.1 SC 1.4.11 extends the 4.5:1 text-contrast requirement to non-text UI: button borders, form input outlines, focus indicators, icons, and graphical elements that convey information (chart segments, status badges).
The 3:1 ratio is measured against the immediate adjacent color — so a pale-grey button border on a white background fails, but the same border on a darker section background may pass. Inactive ("disabled") UI is exempt; informative graphics are not.
Common Shopify failure
Theme `<input>` borders rendered in a 5% darker grey than the page background — common in minimalist themes. Disabled-style "Add to cart" button with `#cccccc` text on white. Pie-chart product comparison widgets where adjacent slices use indistinguishable shades.
How to fix it
AccessComply's ColorContrastAgent extends 1.4.3 detection to UI elements: identifies sub-3:1 component borders, focus rings, and informational icons, then writes fixes to your theme's CSS variables preserving brand hue while raising lightness.
Primary source: W3C — WCAG 2.1 Understanding 1.4.11