Home · Guides · Focus Indicator Contrast
Focus Indicators & Borders: The 3:1 Rule Everyone Forgets
Text contrast gets the attention; the audit failures hide in the boundaries. WCAG 1.4.11 requires the parts of an interface you find by their edges — field borders, focus rings, selected states, meaningful icons — to measure 3:1 against the adjacent colour. Adjacent is the word that does the work.
The trap, in one pair: #777777 measures 4.48:1 against white and 2.79:1 against a #CCCCCC card. A checker that assumes the ground is white passes a ring that, on the surface it actually surrounds, fails. Always name the adjacent colour — the non-text checker makes you.
What 1.4.11 covers — and what it does not
The criterion covers the visual information needed to identify components and states: the boundary of a text field on its surface, the outline of a button whose shape is its only identifier, the focus indicator, the selected tab's distinguishing edge, the lines and bars of a chart where they carry the data. It does not cover pure decoration, inactive (disabled) components, or a component whose identity is carried by text that itself passes — a text link identified by its label and underline convention is judged as text. The judgement call in real audits is almost always the same: if the boundary vanished, would the control still be findable? If not, the boundary is the identifier, and it needs 3:1.
The focus ring crosses two grounds
A focus indicator sits half on the component and half on whatever surrounds it, so it has two adjacent colours, not one — and it must be findable against both. This is why single-colour rings fail in the wild: brand blue on a white page (5.17:1, comfortable) crosses a pale blue surface (under 2:1, gone). The durable pattern is a two-part indicator: an inner ring in one tone and an outer outline in a contrasting tone, so on any ground at least one part is doing 3:1 of work. It looks deliberate, not defensive — most mature design systems have quietly adopted it.
Borders: the #CCCCCC habit
The web's default field border — a light grey around #CCCCCC on white — measures about 1.61:1. It survives because it looks "clean", and it is the first line item of a great many audit reports. The fix is not dramatic: borders need to live nearer the #767676 family (4.54:1 on white) than the #CCCCCC family, or the field needs another identifier (a filled background with its own passing boundary). Test your exact tint, on your exact surface, in the non-text checker — three colours, ten seconds, no assumptions.
Icons and charts
Meaningful icons are graphics under the same rule: the parts that carry the meaning need 3:1 against their adjacent colours. Charts add a second duty — adjacent data series should be distinguishable, which is where colour-vision simulation earns its keep as a warning layer: run the palette through the matrix with a simulation on and look for series that blur together, while remembering the verdicts still come from the real colours and the 3:1 measurements.
Focus & border questions
My focus ring passes on the page background but not on cards. Is that a fail?
Against the card, yes — the criterion is judged against the colours adjacent to the indicator in each state and placement, and a ring that disappears on the surface it most often surrounds fails where it matters. The usual robust fixes are a two-part indicator (a ring plus an offset outline in a contrasting tone) or a ring colour chosen against the worst ground it crosses, not the average one.
Does the browser default outline count?
If it is visible and meets the contrast and visibility criteria in your design, an unmodified default can be acceptable — the standard judges the result, not the effort. The failure mode is removing the outline for aesthetics (outline: none) and replacing it with a subtle colour change that measures 1.4:1. That pattern is the single most common focus failure in audits.
Do input borders really need 3:1? Mine are light grey.
If the border is what identifies the field as a field — the usual case on a plain surface — then yes: the boundary needs 3:1 against the adjacent colours under 1.4.11. The web’s default light-grey field border (#CCCCCC-ish on white, around 1.6:1) does not meet it. Darkening the border to roughly the #767676 family on white (4.54:1) or testing your exact tint in the non-text checker settles it in seconds.