Almost everyone who’s heard of contrast ratios thinks the rules apply to text. They do — but there’s a second rule that catches far fewer people’s attention and fails on a huge number of sites: non-text contrast, WCAG success criterion 1.4.11, added in WCAG 2.1.
It says that user-interface components and meaningful graphics need at least 3:1 contrast against what’s next to them. Here’s what that actually covers, and where it usually goes wrong.
What “non-text” includes
The 3:1 rule applies to things you interact with or need to perceive, not just words:
- The outline of a form field. If a text input is defined only by a pale border, that border needs 3:1 against the page — otherwise users can’t tell where the field is.
- The edge or fill of a button. Especially “ghost” or outline buttons, where a thin border is the only thing marking the clickable area.
- Icons that carry meaning. A hamburger menu, a search magnifier, a close ×. If the icon is the control, it needs 3:1.
- Focus indicators. The ring that shows keyboard users where they are. A focus outline nobody can see is a serious accessibility failure.
- Meaningful parts of graphics. The segments of a pie chart, the line on a graph, the states in a toggle.
Test any of these against their background in the contrast checker — the “Buttons, icons & borders” row in the size breakdown is exactly the 3:1 check.
Where it commonly fails
- Pale input borders. That elegant
#E0E0E0outline on white is around 1.3:1 — nowhere near 3:1. Users with low vision genuinely can’t see where to type. - Low-contrast focus rings. Browsers give you a visible default focus outline; designers often remove it and replace it with something too faint, or nothing at all. Never remove focus indication without replacing it with something that clears 3:1.
- Ghost buttons on busy backgrounds. A thin white outline over a photo can drop well below 3:1 wherever the photo is light.
- Toggle switches. The “off” state and the track are frequently too close in colour to tell apart.
- Disabled controls. These are explicitly exempt from 1.4.11 — but don’t use “it’s disabled” as an excuse to make everything faint. Disabled text still shouldn’t be unreadable.
What it doesn’t cover
A couple of useful exceptions so you don’t over-engineer:
- Purely decorative graphics — a background flourish with no meaning — are exempt.
- Disabled / inactive components are exempt from the 3:1 requirement.
- Logos and brand names as presented are exempt.
How to fix a failing UI element
The fix is the same as for text: adjust the lightness of the element (or its background) until it clears 3:1, keeping the hue you want. For borders and icons specifically:
- Darken a pale border.
#767676on white clears 3:1 comfortably;#E0E0E0doesn’t come close. - Give focus rings a solid, high-contrast colour and a decent thickness — 2px of a colour that hits at least 3:1 against both the component and the page.
- For controls over images, add a solid or semi-opaque plate behind them so the contrast is predictable.
The one-line takeaway
Text needs 4.5:1 (or 3:1 when large). Everything you click, type into, or need to see — borders, icons, focus rings — needs at least 3:1. It’s the rule nobody remembers, and fixing it is one of the highest-impact, lowest-effort accessibility wins available.
Check your buttons, borders and icons in the contrast checker — the non-text row does the 3:1 maths for you.