Visible focus indicators are the most common accessibility failure designers override. The default browser focus ring looks inconsistent across browsers and often clashes with the visual design. The solution is not to remove it — it's to replace it with a custom indicator that is both accessible and on-brand.
What WCAG requires
WCAG 2.4.7 (Level AA) requires that any keyboard-operable interface have an operating mode where the keyboard focus indicator is visible. WCAG 2.4.11 (new in 2.2, Level AA) requires that the focus indicator not be entirely hidden by other content — sticky headers and overlays cannot completely obscure focused elements. WCAG 2.4.13 (Level AAA) adds quantitative requirements: the focus indicator area must be at least the perimeter of the unfocused component, and must have a 3:1 contrast ratio against adjacent colors.
The :focus-visible selector
Modern CSS provides :focus-visible, which applies styles only when the browser determines that focus should be visible (typically keyboard navigation, not mouse clicks). This lets you provide a strong focus ring for keyboard users without showing it on every mouse click. Use :focus-visible as the primary focus style and consider removing the :focus style for mouse users.
A high-contrast custom focus indicator
/* Remove default outline */
*:focus { outline: none; }
/* Apply visible, high-contrast focus indicator for keyboard users */
*:focus-visible {
outline: 3px solid #16a34a; /* 3px width meets WCAG 2.4.13 area requirement */
outline-offset: 3px; /* Separation from element provides contrast context */
border-radius: 4px; /* Match element border-radius for visual coherence */
}
/* Invert for elements on dark backgrounds */
.dark-surface *:focus-visible {
outline-color: #ffffff;
}Designing for focus containment
WCAG 2.4.11 requires that focused elements are not entirely hidden. The most common failure is a sticky header covering a focused input or link near the top of the page. The fix is scroll-margin-top — set it on focusable elements to the height of the sticky header so the browser scrolls far enough to reveal them. This is a purely CSS fix that requires no JavaScript.
Tip
Test your focus indicators in high-contrast mode (Windows forced colors mode). Your CSS custom colors may be overridden and the default outline may be suppressed. Use the CSS media query (forced-colors: active) to provide a transparent outline that becomes visible in forced colors mode.