Focus Indicator Designer

A CSS focus indicator is a visual cue that highlights which element on a webpage is currently focused — typically when a user navigates using the Tab key. It's defined using the :focus or :focus-visible pseudo-classes, usually via the outline or box-shadow properties. Proper focus indicators are essential for keyboard accessibility.

Removing the default outline with outline: none without providing an alternative focus style makes your site inaccessible to keyboard users. WCAG Success Criterion 2.4.7 requires a visible focus indicator. If you remove the outline, you must add a clearly visible alternative — such as a high-contrast box-shadow ring or a custom outline style.

:focus applies whenever an element receives focus — including mouse clicks. :focus-visible is smarter: it only shows the focus style when the browser determines the user is navigating via keyboard (or another non-pointing device). This means mouse users won't see the focus ring on buttons they click, creating a cleaner experience while preserving accessibility. Most modern sites prefer :focus-visible.

outline-offset controls the space between the element's border edge and the outline. A positive offset (e.g., 2px) pushes the outline outward, creating a gap that improves visibility — especially useful when the element's background color is similar to the outline color. A negative offset pulls the outline inside the element. This property only works with outline, not box-shadow.

Both have their strengths. Outline is the browser's native focus mechanism — it respects outline-offset and doesn't affect layout. Box-shadow gives you more design flexibility (blur, spread, multiple rings, inset shadows) and can create smoother, more modern-looking focus rings. Many designers use box-shadow for aesthetics while ensuring it meets WCAG contrast requirements. You can also combine both for a double-ring effect.

WCAG 2.2 requires that focus indicators have a minimum contrast ratio of 3:1 against adjacent colors. The indicator should be at least 2 CSS pixels thick (perimeter). It should also be clearly visible — not hidden behind other elements or too subtle to notice. A good rule of thumb: if you can't easily spot the focused element at a glance, the indicator needs improvement.

Yes! You can use CSS transition on outline-color, outline-offset, and box-shadow to create smooth animations. You can also use @keyframes for pulsing effects. However, respect users who prefer reduced motion — wrap your animation in a @media (prefers-reduced-motion: no-preference) query to ensure accessibility for all users.

The best way to test is to use the Tab key to navigate through your page. Check that every interactive element (links, buttons, inputs, etc.) shows a clearly visible focus indicator. Test on different backgrounds (light and dark). You can also use browser DevTools to simulate forced :focus-visible states. Tools like the WAVE accessibility extension can help identify missing focus indicators.