Visible Focus Border px

Visible focus border size (px)

WCAG 2.2 added two success criteria that work together here: 2.4.11 Focus Not Obscured (Minimum) — Level AA and 2.4.13 Focus Appearance. Between them, a focus indicator has to be big enough and contrasted enough that nobody can miss it. The thinnest it can be is 2 CSS px around the perimeter, and the contrast between the focused and unfocused states needs to hit 3:1 against whatever is behind it. Short version: border_size ≥ 2 px && contrast ≥ 3:1.

In Tailwind CSS the usual recipe is focus:ring-2 focus:ring-blue-500 focus:ring-offset-2, giving you a 2 px ring with an offset. Writing plain CSS, reach for :focus-visible rather than :focus, since it only fires during keyboard navigation and spares you a stray outline every time someone clicks. Browsers do ship a default ring (the legacy -webkit-focus-ring-color), but it looks so different across Chrome, Firefox and Safari that you really should define your own. Recommendation 3.6 of Brazil's eMAG (Modelo de Acessibilidade em Governo Eletronico) says the same thing.

Applications

Reach for this calculator when you are designing buttons, links, form controls, custom checkboxes, segmented controls, tabs, or really any interactive widget. Check the indicator on both light and dark backgrounds, because a blue ring that looks fine elsewhere can flunk 3:1 on a navy hero. In dense UIs like toolbars and grids, a flat 2 px can read as noisy, so try 3 px at lower opacity to keep the contrast while calming the look.

FAQ

Does box-shadow count as a focus border? It does. An inset or outer shadow with enough contrast and thickness meets 2.4.11, and a lot of people prefer it precisely because it leaves the layout untouched.

What is the difference between :focus and :focus-visible? :focus kicks in on any focus, mouse clicks included. :focus-visible only matches when the browser figures the user actually needs to see the indicator, which usually means keyboard use or assistive tech.

Can I use only color to show focus? No. WCAG 1.4.1 Use of Color is clear that a contrast shift on its own does not cut it. There has to be a structural change too, a border, ring or outline of at least 2 px.