Online Tool Store
· 5 min read
How to Check Focus Styles Are Visible Enough
Heshan Fernando
Co-founder & COO
outline: none appears in almost every CSS reset ever written. It removes the browser’s default focus ring, which is genuinely ugly, and it is one of the most damaging single declarations on the web.
Without a replacement, keyboard navigation becomes invisible. The focus is still moving; nobody can see where.
Who this affects
Not a niche group.
Keyboard-only users, including people with motor impairments for whom a mouse is impractical, and people using switch devices or voice control that maps to keyboard navigation.
Screen magnifier users, who see a fraction of the screen at a time and rely on the focus indicator to know where they are.
Anyone whose mouse has stopped working, which is temporary and total while it lasts.
Power users, who tab through forms because it is faster.
For all of them, an invisible focus indicator means navigating by counting tab presses and guessing.
The contrast requirement, and the part people miss
WCAG requires a focus indicator to have at least 3:1 contrast against adjacent colours. The word doing the work is adjacent.
An indicator sits at a boundary. Inside it is the component; outside it is whatever the page has there. A blue ring with good contrast against a white button can vanish against a blue-grey page background a pixel away.
So the check is against both surfaces, and passing one is not passing. This is the most common way a focus style meets the letter of a contrast check and fails in practice.
| Check | Requirement |
|---|---|
| Against component background | ≥ 3:1 |
| Against adjacent page background | ≥ 3:1 |
| Thickness | Enough to be perceivable — 2 px typical |
| Present on every focusable element | Required |
focus-visible does what people wanted
The original reason for removing outlines was that they appeared on mouse clicks, which looked untidy.
:focus-visible solves that properly. The browser applies it only when it judges the interaction warrants a visible indicator — keyboard navigation yes, mouse click on a button no, click into a text field yes.
That gives designers the clean mouse experience they were after without removing anything from keyboard users. Using :focus-visible for the styled indicator and leaving a fallback for older browsers is now the standard pattern, and there is no remaining good reason for a bare outline: none.
Test by tabbing
A contrast ratio is a necessary check and not a sufficient one.
Tab through the whole page. Every interactive element should show a clear indicator, in an order that makes sense, with nothing skipped and nothing trapped.
The problems this finds and a colour check does not: custom components that are not focusable at all, indicators clipped by overflow: hidden on a parent, elements that receive focus off-screen, and modals that let focus escape behind them.
Those are all more serious than a marginal contrast ratio, and none of them show up in a palette tool.
Focus order has to make sense
Visibility is one half. Sequence is the other, and it fails independently.
Focus moves in DOM order by default, which usually matches the visual layout and sometimes does not. CSS that reorders elements visually — flexbox order, grid placement, absolute positioning — leaves the focus order following the source, so tabbing jumps around the page in a sequence that makes no sense on screen.
Positive tabindex values cause the same problem more deliberately, which is why they are almost always a mistake.
The test is tabbing through and watching where focus goes. If it jumps from the header to the footer and back to the sidebar, the source order needs fixing rather than the tabindex, because a visual reader and a keyboard user should be following the same path.
Common mistakes to avoid
outline: nonewith no replacement.- Checking contrast against the component only.
- Styling
:focuswithout a:focus-visiblerefinement, or the reverse with no fallback. - Indicators clipped by a parent’s overflow rules.
- Custom interactive elements built from divs that never receive focus at all.
How to do it with Focus Indicator Tester
The Focus Indicator Tester checks the indicator against both surfaces.
- Enter the indicator colour and both backgrounds it touches.
- Confirm both ratios clear 3:1.
- Check the thickness is enough to perceive at normal viewing distance.
- Then tab through the real page, which finds the problems contrast cannot.
MDN’s :focus-visible documentation covers the selector and its browser support. Other developer tools are in the tools directory.
Frequently asked questions
What contrast does a focus indicator need?
At least 3:1 against adjacent colours — and that means both the component it sits on and the page background beside it. Passing against one and failing the other is the common error.
Can I remove the default outline?
Only with a replacement at least as visible. outline: none alone makes keyboard navigation impossible to follow and is one of the most common accessibility failures on the web.
What is :focus-visible for?
It applies focus styling only when the browser judges it useful — keyboard navigation rather than a mouse click. It gives the clean look people wanted from removing outlines, without the harm.
Final thought
Tab through your own page once. Thirty seconds tells you more than any contrast calculation, and it is the test nobody runs.