A focus ring must retain contrast on every background
Aliases: focus ring · focus appearance · keyboard focus · contrast
What it is
Focus indicator contrast is the requirement that a focus ring, or another keyboard-focus marker, remains clearly separated from its adjacent component edge and background. Focus that exists but cannot be seen is functionally absent. “Every background” means the component’s actual states: light and dark themes, selected or disabled neighbors, images, gradients, hover overlays, data visualizations, and high-contrast modes must not swallow the cue.
Why it happens
Focus rings tend to be thin and sit at component edges, where borders, shadows, selected fills, and texture can camouflage them. A fixed color that stands out on white may disappear on a same-colored button, dark card, or photo. Keyboard navigation depends on peripheral detection of focus; a weak or broken outline turns continuous movement into laborious visual search. A double outline, adaptive background treatment, or sufficiently wide shape offers redundant boundary evidence rather than betting on one brand color.
Studying it
Build a component-state matrix: inspect focus on each focusable component beside default, hover, selection, error, disabled adjacency, light/dark themes, scroll containers, and image backgrounds. Image or style automation can catch clipping and overlap, but keyboard users should also perform target-finding and form-entry tasks; measure time to locate focus and unintended activation. A white component-library canvas misses combinations in content. Include zoom, forced-colors settings, and browser-native rendering.
Where it stops holding
Contrast does not mean a harsh or flashing outline. Focus should be visible without becoming the dominant content and remain distinct from error, warning, and selection. Platform-drawn native controls may be governed by a system theme; applications should not override them and assume a custom color is reliable. Custom components cannot cite branding as a reason to skip complex-background testing. Giving nonfocusable elements a ring creates a false action affordance.
Applying it
- Maintain a focus-state matrix beyond a design token; test distinction from both the component and surrounding surface.
- Prefer a double outline, offset stroke, or adequately thick indicator over a single color with accidental contrast.
- Include dark mode, image cards, selected rows, error fields, and overlays in visual regression and keyboard walkthroughs.
- Have people navigate real flows by focus alone. Pausing to search, leaning close, or activating a neighbor calls for revising its form and background relation.