Last updated
Best Practices for Focus Indicators
- Never use
outline: nonewithout providing a custom focus indicator - Use
:focus-visibleinstead of:focusto avoid showing focus rings on mouse clicks - Ensure focus indicator contrast ratio is at least 3:1 (WCAG 2.2)
- Use at least 2px outline width for visibility
- Test keyboard navigation manually after making CSS changes
- Ensure all custom interactive components have tabindex and keyboard handlers
The Focus Indicator Checker on TechConverter.me automates the detection of focus indicator issues, provides specific CSS fixes for each problem, and helps you build keyboard-accessible interfaces that work for all users.
Examples
Example 1: Removed Focus Indicator (Most Common Issue)
The most common accessibility mistake — removing the browser's default focus ring without providing an alternative:
/* Problematic CSS — removes focus indicator entirely */
button:focus {
outline: 2px solid #4a90e2;
}
a:focus {
outline: 2px solid #4a90e2;
}
* {
outline: 2px solid #4a90e2; /* Worst case — removes focus from ALL elements */
}
The checker flags these as WCAG 2.4.7 violations. Recommended fix:
/* Accessible custom focus indicator */
button:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
a:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
border-radius: 2px;
}
/* Use :focus-visible to show focus only for keyboard navigation,
not mouse clicks — best of both worlds */
Example 2: Insufficient Contrast (WCAG 2.2 Focus Appearance)
A focus indicator that exists but is too low-contrast to be perceivable:
/* Problematic — light gray outline on white background */
button:focus {
outline: 2px solid #cccccc;
}
Contrast ratio: 1.6:1 (fails WCAG 2.2 minimum of 3:1)
Checker output:
Element: button.submit-btn
Issue: Focus indicator contrast ratio 1.6:1 (minimum required: 3:1)
Focused state color: #cccccc
Background color: #ffffff
Contrast ratio: 1.6:1
WCAG 2.2 SC 2.4.11: FAIL
Fix: increase outline color contrast
Suggested: outline: 2px solid #005fcc; (contrast ratio: 8.6:1 ✓)
Example 3: Focus Indicator Size Requirements (WCAG 2.2)
WCAG 2.2 SC 2.4.11 requires focus indicators to have a minimum area:
/* Too thin — fails WCAG 2.2 */
button:focus {
outline: 1px solid #005fcc;
}
/* Compliant — meets minimum area requirement */
button:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
/* Also compliant — box-shadow approach */
button:focus-visible {
outline: 2px solid #4a90e2;
box-shadow: 0 0 0 3px #005fcc;
}