Focus indicators failing WCAG 1.4.11: real cases and exact fixes
What is a focus indicator?
A focus indicator is the visual signal that shows keyboard users which interactive element is currently focused.
WCAG 2.1 SC 1.4.11 (Non-text Contrast) regulates focus indicators because users navigating with a keyboard must clearly perceive where focus is located.
The minimum required contrast ratio for visible focus indicators is 3:1 against adjacent colors.
Why static accessibility tools often miss these issues
Most static accessibility scanners cannot reliably detect focus indicator failures because the :focus or :focus-visible state only exists during actual keyboard interaction.
To properly validate focus indicators, manual testing with the keyboard is required.
Usually:
Tab
Shift + Tab
Browser DevTools
Contrast analyzers
Real accessibility audit cases
Case 1 — Tourism company
The primary search button had a focus indicator with a contrast ratio below 3:1.
Problem
Keyboard users could technically navigate to the button, but the visible focus state was too subtle to perceive clearly.
WCAG failure
SC 1.4.11 — Non-text Contrast
Fix
Use a high-contrast outline with :focus-visible.
:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
}
Case 2 — Educational platform
The “Login” button changed from #02959F to #027279 when focused.
Problem
Contrast between both visual states was only 1.57:1.
The component relied exclusively on color to communicate focus.
WCAG failures
SC 1.4.11 — Non-text Contrast
SC 1.4.1 — Use of Color
Fix
Add a visible outline independent of color changes.
:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
}
Case 3 — Same platform
The “Remember me” checkbox used a black focus indicator (#212529) over a dark background (#1D191C).
Problem
Contrast ratio:
1.12:1
The focus state became nearly invisible.
Fix
Replace the focus indicator with:
outline: 2px solid #0297A2;
Results
4.92:1 against background
3.79:1 against adjacent colors
WCAG compliant.
How to test focus indicators properly
Recommended setup:
Chrome or Firefox
Keyboard navigation only
Colour Contrast Analyser (CCA)
Optional: NVDA or VoiceOver
Testing steps:
Navigate using only Tab
Verify focus is always visible
Measure contrast of the focus indicator
Validate zoom and dark mode scenarios
Quick production checklist
Before release, ask:
Can focus be identified immediately?
Does the indicator reach at least 3:1 contrast?
Does the state rely only on color changes?
Is focus still visible in dark mode?
Is it visible at 200% zoom?
Focus indicators are one of the most commonly overlooked accessibility failures in production systems, especially because many automated tools cannot fully detect them.
And yet, for keyboard users, they are critical navigation cues.