Short answer
One that works on every surface in the system, not just the page background. A single brand-coloured ring usually fails somewhere — on a filled button of a similar colour, on a dark header, on a mid-grey toolbar. A two-tone ring (a dark line with a light line beside it) guarantees at least about 4.5:1 against any solid background, which is why it is the safest default; if a single colour is used, test it against every surface token.
A focus ring appears on buttons, links, inputs, cards, menu items and tabs, which means it is drawn next to every surface colour a system has: the page, raised cards, sunken inputs, filled primary buttons, dark navigation bars, inverse tooltips. WCAG 1.4.11 asks that the visual information identifying a component's state have 3:1 against adjacent colours, and the Understanding document treats focus indicators as such an indicator. So the right question for a design system is not 'does our ring pass on white?' but 'what is the worst surface it can land on?'. The table answers that for five candidate rings across five typical surfaces.
Any single colour has a lightness, and a surface of similar lightness will defeat it. A blue ring such as #005FCC passes comfortably on white and light grey and only just reaches 3:1 on near-black, but falls to about 1.3:1 against a mid-grey toolbar and a brand-blue button. Black fails on dark surfaces; white fails on light ones; yellow is excellent on dark and blue but useless on white. The two-tone ring solves this with arithmetic: against any background, either black or white reaches at least about 4.5:1, because the background cannot be close to both. The worst case is a mid-grey near #767676, where black and white score almost equally — which is also the reason WCAG's own examples include two-colour indicators.
Treat the focus indicator as a small set of tokens rather than one colour: border-focus-inner, border-focus-outer, and a width (at least 2 CSS pixels, which also satisfies the area part of the AAA focus-appearance criterion for most components). In CSS, an outline plus a box-shadow, or an outline with an outline-offset over a contrasting halo, produces the two tones. Keep the ring outside the component where possible, so it is measured against the surface rather than the component's own fill, and make sure containers do not clip it. In forced colours mode, browsers replace author colours with the user's palette; an outline survives that replacement, whereas a box-shadow ring is typically removed, so a two-tone design should use a real outline for at least one of its lines.
Many teams want the ring in the brand colour. It can be done safely by pairing it: brand-coloured outer ring with a white or dark inner separator, chosen so the combined indicator has a high-contrast part against every surface. Alternatively, keep a brand-coloured ring on the main light surface and switch to the two-tone ring through a token override on dark, brand-filled and mid-tone surfaces. Whatever the choice, keep one rule: the focus colour must never be reused for anything else — selection, hover, validation — or users lose the ability to tell where keyboard focus is. The accessibility guide on focus visibility covers what each WCAG criterion asks and how to test it.
| Ring | Surfaces where it reaches 3:1 | Worst case |
|---|---|---|
| Blue #005FCC | 3 of 5 | 1.31:1 on mid grey #767676 |
| Black #000000 | 4 of 5 | 1.12:1 on dark #121212 |
| White #FFFFFF | 3 of 5 | 1.00:1 on white |
| Yellow #FFDD00 | 3 of 5 | 1.20:1 on light grey #F1F3F4 |
| Two-tone: black inner + white outer | 5 of 5 | 4.62:1 on mid grey #767676 |
Why: The ring is the same hue and lightness as the button fill.
Fix: Offset the ring outside the button, or use a two-tone ring.
Why: The ring is drawn with box-shadow, which forced colours mode removes.
Fix: Draw at least one line of the ring with outline.
Why: The same colour is used for both states.
Fix: Reserve the focus colour for focus only.
Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.
Colourwise analysisStrong evidence
Across white, light grey, mid grey (#767676), a brand blue (#1A73E8) and a #121212 dark surface, every single-colour focus ring tested falls below 3:1 on at least one surface, while a black-plus-white two-tone ring keeps at least about 4.5:1 on all of them.
Based on: Computed by Colourwise with the WCAG 2.2 contrast formula; see the table.
Caveat: Results depend on the surfaces a particular system uses; the test is the method, not these five colours.
Source: Web Content Accessibility Guidelines (WCAG) 2.2; Understanding Success Criterion 1.4.3: Contrast (Minimum) (WCAG 2.2)
StandardStrong evidence
The W3C Understanding document for focus appearance describes a two-colour indicator in which only the part that meets 3:1 needs to meet the minimum-area requirement.
Source: Understanding Success Criterion 2.4.13: Focus Appearance (WCAG 2.2)
FactStrong evidence
In forced colors mode the user agent overrides author colours with the user's preferred palette, so focus indicators should use properties the mode preserves, such as outlines.
Caveat: Which properties are preserved or removed is partly browser-specific; test in the target browsers.
Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.