Designing Focus States People Actually Notice

The ring that everyone removes

If you have ever pressed Tab on a website and lost track of where you were, you have met the most common accessibility bug on the web. Someone removed the focus outline because it looked ugly, and nothing replaced it.

It is an understandable decision. Default browser outlines rarely match a design. But for people who navigate with a keyboard, the focus indicator is the cursor. Without it, the page is effectively blind.

Visible, not loud

The important distinction is between a focus state that is visible and one that is distracting. The goal is a ring you can't miss when you are looking for it and barely notice when you are not.

In UI Vintage, every interactive element uses the same recipe: a three-pixel ring in the primary color at partial opacity, drawn outside the element so it never shifts the layout.

Contrast still applies

That sounds simple, but a ring is only useful if it stands out from both the element and the page behind it. An orange ring on an orange button disappears. The fix is a thin gap between the element and the ring, usually the page background color, so the ring always has something to contrast against.

Test it the boring way

There is no shortcut here. Unplug the mouse, or just stop touching it, and walk through a page with Tab, Shift+Tab, Enter, and the arrow keys. If you can't tell where you are at any point, a reader can't either.

The point is not to add decoration. It is to make sure the page answers one question at every moment: where am I? A good focus state answers it quietly, and the design usually looks better for it.