Non-text Contrast

What it asks

The 1.4.3 contrast rule covers text only; 1.4.11 extends a weaker version (3:1 instead of 4.5:1) to two more categories. First, UI component visual indicators — what tells you a button is a button, where the focus ring is, where the form-field boundary lies — must hit 3:1 against the adjacent surface. Second, the parts of meaningful graphics that the user needs to identify — chart bars, icons that convey state, indicator dots — must hit 3:1.

How to meet it

• Give every form field a visible border at 3:1 minimum against the page background.
• Style focus indicators (:focus-visible outline) at 3:1 minimum against both the component and the page.
• For ghost / outline buttons, the border itself must hit 3:1 against the page background.
• For toggle switches, the on/off track and thumb must have 3:1 contrast where they meet.
• For icons that carry meaning (“info” i, “warning” triangle, “checkmark”), the icon strokes must hit 3:1 against their background.
• For chart series, the colors used to distinguish bars / lines must be 3:1 apart from each other, or paired with pattern/texture.

Common failures

• Form fields with no visible border, or a #e5e5e5 on #fff border at 1.3:1 — invisible to low-vision users.
• Focus outline default browser styling overridden by outline: none and never replaced.
• Ghost buttons with white text on a transparent background and a 1px gray border — the button is effectively invisible.
• Toggle switches with a barely-visible thumb on a near-matching track in the “off” state.
• Status icons in the corner of a card (a green checkmark, a red x) where the color barely contrasts the card background.
• Pie chart with slice colors at 2:1 against each other — sighted users can still see the boundaries, but barely; low-vision users see one blob.

Why it matters

1.4.11 was added in 2.1 and routinely catches teams off guard — most contrast checking covers only text. Form-field borders, focus rings, and ghost buttons are the canonical fail patterns. Tools like axe and Stark now check non-text contrast, but designers still skip it at design time because the default mental model is “contrast = text contrast.” Fixing it usually means thickening borders and darkening grays in the design system.