Skip to content

Tools — 16

The focus ring is the last thing anyone designs and the first thing a keyboard user sees.

WCAG 2.2 SC 1.4.11 requires 3:1 contrast between the focus indicator and the surface behind it. A blue ring on a dark sidebar that nobody checked is the single most common accessibility failure in production design systems. This tool reads your background colours from the token schema and tells you before you ship.

Ring settings

Colours from token schema

Ring colour

The primary outline colour for :focus-visible.

The surface the ring sits on — used for contrast checking.

The outer box-shadow ring for the double style.

2px
3px

Ring style

Preview



Read more about this

Tab through the elements above to see the focus ring in action.

Ring contrast against background

11.61:1

Non-text contrast

Pass3:1 — SC 1.4.11 met

Halo-to-ring contrast: 11.61:1

Export

CSS :focus-visible
/* Focus ring — generated by Vantra Tools */
:focus-visible {
  outline: 2px solid #021f94;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px #f5f2f3;
}

Reference

A WCAG-compliant focus ring needs at least 3:1 contrast against the surface behind it (success criterion 1.4.11 Non-text Contrast). A two-tone ring — a coloured outline with a paper-coloured box-shadow halo — ensures visibility on both light and dark surfaces.

What contrast does a focus ring need?

WCAG 2.2 success criterion 1.4.11 Non-text Contrast requires 3:1 between the focus indicator and the adjacent background. This applies to the outline colour against the surface the control sits on, not against the control itself.

A ring that passes on a white background may fail on a dark sidebar, which is why this tool checks the ring against the background colour you specify — or against the backgrounds already in your token schema.

Why use a two-tone (double) focus ring?

A single-colour ring cannot guarantee 3:1 against every possible background. A dark ring fails on dark surfaces; a light ring fails on light ones.

The two-tone pattern — a coloured outline with a paper-coloured box-shadow sitting outside it — ensures that one of the two rings always contrasts with whatever is behind it, including photographs where no fixed colour could be guaranteed.

How does this tool read from the token schema?

The focus-ring generator reads colour primitives from the shared token schema rather than requiring manual hex input. If you have generated a colour ramp with the Color Ramp Generator, those colours appear as presets here.

The generated focus-ring config is also saved back into the schema, so the CSS export and the token file stay in sync.

Common questions

Is :focus-visible enough, or do I also need :focus?
:focus-visible is preferred because it only activates on keyboard navigation, not on mouse clicks. Provide a :focus fallback for browsers without :focus-visible support, using @supports not (selector(:focus-visible)).
What offset should a focus ring have?
2–4px is the practical range. Too close to the element and the ring is hidden by the element's own border; too far and the ring appears disconnected. 3px is a safe default.
Does the focus ring need to be visible in Windows High Contrast Mode?
Yes. outline is respected in High Contrast Mode; box-shadow is not. That is one reason this tool uses outline as the primary ring and box-shadow only for the optional halo.

Sources