When a user navigates your site with a keyboard (Tab, Shift+Tab, Enter), the focus indicator is their cursor. Without a visible focus indicator, keyboard users are navigating blind. WCAG 2.2's Success Criterion 2.4.11 (Focus Appearance) sets specific, testable requirements for how focus indicators must look.
The Requirements
At AA level, the focus indicator must have a contrast ratio of at least 3:1 between its focused and unfocused states. The indicator must be at least 2 CSS pixels thick on the perimeter of the element. And it must not be entirely obscured by other content.
Choosing a Focus Color from Your Palette
Your primary brand color is often the best choice for focus indicators. It is already designed to be prominent and recognizable. But you need to verify it has 3:1 contrast against both your light base (for elements on light backgrounds) and your surface color (for elements on cards or panels).
Open PaletteRx Step 3 and check the contrast ratio between your primary color and your light base. If it is at least 3:1, your primary works as a focus color. If not, try your dark base or a darker variant of your primary.
CSS Implementation
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
/* Remove default only when custom is in place */
:focus:not(:focus-visible) {
outline: none;
}Common Mistakes
Removing the default outline without adding a replacement (leaves keyboard users stranded). Using a focus color too similar to the background (fails 3:1). Using a focus color too similar to the element's own border (the change is not visible). Using :focus instead of :focus-visible (shows focus rings on mouse clicks, annoying mouse users).