WCAG 1.4.11 — Non-text Contrast

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.

Failing examples

A soft border that disappears against white:

<button className="border border-gray-200 bg-white">Save</button>

A hover state with no meaningful contrast change:

<button className="bg-blue-600 hover:bg-blue-500 text-white">
  Continue
</button>

Passing examples

Push the border into the visible range:

<button className="border border-gray-500 bg-white">Save</button>

Pair the colour shift with a second signal — a border, an underline, an icon shift — so contrast isn't the only channel:

<button className="bg-blue-700 ring-blue-900 hover:ring-2 text-white">
  Continue
</button>

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.