April 17, 2023 · reala11y team

Non-text Contrast (WCAG 1.4.11): the 3:1 rule for UI

WCAG 1.4.11 asks UI components, focus indicators, and meaningful graphics to hit 3:1 contrast. Here's what counts, how to check it, and how to fix it on WordPress.

Most people know about text contrast — the 4.5:1 rule that keeps body copy readable. Far fewer know that there’s a parallel rule for everything that isn’t text: the border around a form field, the outline of a button, the focus ring, the bars of a chart, the icon that means “search.” WCAG Success Criterion 1.4.11, Non-text Contrast, says those things need enough contrast too. It’s Level AA, and it’s one of the most commonly missed criteria precisely because designers tend to think about contrast only for words.

If your form fields are outlined in a faint grey on white, or your focus ring is a thin pale line nobody can see, this one is for you.

What 1.4.11 actually requires

The rule is a single threshold: a contrast ratio of at least 3:1 against adjacent colours, for two categories of non-text content.

1. User-interface components. The visual information needed to identify a control and its state. In practice: the boundary of a text input, the edge of a button, the checkmark or fill of a checkbox, the toggle of a switch, the focus indicator. The part that tells you “this is a control, and here’s its current state” must stand out from what’s around it at 3:1.

2. Graphical objects. The parts of a graphic required to understand the content. The slices of a pie chart, the line in a line graph, the meaningful strokes of an icon. Decorative flourishes don’t count — but anything carrying meaning does.

Note the lower bar: 3:1, not 4.5:1. Non-text content gets a more forgiving threshold than body text because shapes are generally easier to make out than letterforms. But it’s still a floor a lot of subtle, on-trend designs fall below.

What counts — and what’s exempt

The exemptions matter as much as the rule:

• Inactive (disabled) components are exempt. A greyed-out button doesn’t need 3:1.
• Pure decoration is exempt — graphics that convey nothing.
• Logos and brand marks are exempt; you don’t have to recolour a logo.
• Default browser controls you haven’t styled are the user agent’s responsibility, not yours.
• A graphic where a specific appearance is essential (a photograph, a flag, a heat map) is judged on the information it must convey.

The trap is the boundary case: a control’s state. If the only thing distinguishing a selected tab from an unselected one is a colour change that’s under 3:1, the state isn’t perceivable — and that’s a failure even if the text labels are fine.

How to check it

Checking non-text contrast is the same arithmetic as text contrast — you’re just measuring different pixels.

• The component boundary vs. its background. Eyedrop the border colour of a form field and the page colour behind it. Run them through a contrast checker. Under 3:1 means the field’s edge is hard to find.
• A control’s state indicator vs. its surroundings. The fill of a checked checkbox vs. the box; the active-tab underline vs. the inactive tabs.
• Focus indicators vs. both backgrounds. A focus ring has to clear 3:1 against the element it surrounds and the page behind it. A ring that’s visible on white but vanishes on your dark header fails on the header.
• Meaningful icons and chart parts vs. their background. The search magnifier in your header; the lines in your stats graphic.

Browser DevTools will sample any pixel’s colour, and a contrast tester turns two colours into a ratio. Our own color-contrast tester does the same job — two colours in, ratio and pass/fail out — which is just as useful for a button border as it is for body text.

Where WordPress sites trip up

In rough order of how often we see it:

• Faint form-field borders. A #e0e0e0 border on a white background sits around 1.2:1 — nearly invisible. Inputs need a boundary that clears 3:1, or another non-colour cue.
• Weak focus indicators. A 1px pale outline, or worse, outline: none with nothing put back. Focus visibility is its own concern (2.4.7), and 1.4.11 governs whether that indicator has enough contrast to be seen.
• Low-contrast button outlines. “Ghost” / outline buttons are fashionable and frequently fail — a pale border on a pale background reads as 1.5:1.
• Toggle and checkbox states where on vs. off is a subtle tint shift under 3:1.
• Chart and infographic plugins using a pastel palette where adjacent series don’t separate at 3:1.
• Placeholder-as-label patterns that lean on faint grey to imply a field.

Here’s a focus indicator built to clear the bar — and to stay visible on any background by pairing a dark and light ring:

:focus-visible {
  outline: 2px solid #1a1a1a;     /* dark ring */
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #ffffff;  /* light halo, so it shows on dark too */
}

And a form field with a border that’s actually perceivable:

.field {
  border: 1px solid #595959;   /* ~7:1 on white — comfortably past 3:1 */
}

Where automated tooling fits — and where it doesn’t

Non-text contrast is one of the more automatable corners of WCAG: a tool can sample a border colour against its background and do the maths. But the automation has real limits. A scanner can’t always tell which graphic is meaningful versus decorative, can’t reliably read state changes that happen on interaction, and can’t judge a focus ring against a backdrop that only exists when the element is focused. Because the remedy is a colour value in the CSS, it’s a code-level change — not something an overlay widget can supply, since the overlay never alters the stylesheet your visitors download. reala11y works at the source so the rendered styles your real visitors and their assistive tech receive are the thing that changed. The honest framing we hold to: automated tools, ours included, detect roughly 30–40% of WCAG issues by criteria, and the meaningful-vs-decorative and state-change calls here still need a person.

The honest takeaway

Non-text Contrast extends the contrast habit from words to the rest of the interface: borders, focus rings, control states, and meaningful graphics all need 3:1. Sample the colours, fix the faint borders and the invisible focus rings first — those are the highest-impact, most automatable wins — then let a human judge the icons and chart palettes. Do that, and you’re moving toward WCAG 2.2 AA conformance on this front the right way: by making your controls visible to the people who need the contrast.