WCAG 1.4.11 — Non-text Contrast
UI components and meaningful graphics need at least 3:1 contrast against their adjacent colour. The criterion exists because a button you cannot see is a button you cannot use.
What this requires
The visual boundary of an active UI component — its border, background, or icon — must have at least 3:1 contrast against the adjacent colour. The same threshold applies to the visual state changes of a component (hover, focus, selected, disabled) and to non-text graphics that convey meaning (chart bars, status icons, illustration elements that carry information).
How AI coding tools fail this
The dominant failure: low-contrast borders generated by default
Tailwind tokens. A border border-gray-200 button on a white
background measures around 1.5:1 — well below the 3:1 threshold. The
visual looks "soft" and "modern"; the keyboard user can't tell where
one button ends and the next begins.
The second pattern: hover and focus states whose only signal is a tiny
shift in lightness. A button that changes from bg-blue-600 to
bg-blue-700 on hover passes the AA text contrast check but fails the
3:1 boundary check between the two states. Users with low vision get no
feedback.
The third: status icons whose only colour information is below threshold. A green check on a green background, an orange dot on a yellow header — semantically correct, visually invisible to a meaningful fraction of users.
Edge cases
- Disabled controls are exempt. The whole point of disabled state is "this isn't active" — low contrast is the convention for that.
- Pure decoration (a flourish, a divider, a watermark) doesn't have to meet 3:1. Make sure it's decorative and not load-bearing first.
- Logos and branding are exempt under WCAG, but consider their context. A logo that doubles as a "back to home" link is functional and should meet contrast.
- Inactive form fields (the empty default state) often have very faint borders. They still need to meet 3:1 — a faint border is still the only signal of where to click.
- Charts and graphs carrying information need 3:1 between each data series and the background. Patterns or labels can supplement but don't substitute.
How Jeikin handles this
Jeikin's MCP server returns the project's design tokens and their
contrast ratios when an AI assistant is choosing UI colours. The
dashboard surfaces design-system-level findings — a border-muted
token used 47 times that fails 3:1 against bg-background — so the fix
lands once in the token rather than 47 times in the components.