What Is a Focus Indicator?
A focus indicator is the visible cue — usually an outline, ring, or highlight — that shows which interactive element on a page currently has keyboard focus. It acts as the keyboard user's equivalent of a mouse cursor, revealing where a Tab press will land and what Enter will activate. WCAG requires a visible focus indicator with sufficient contrast, and removing it without a replacement makes a site unusable for keyboard and screen reader users, so it is a foundational accessibility feature.
- WCAG requirement
- 2.4.7 Focus Visible (Level AA) requires a visible focus indicator (W3C)
- WCAG 2.2 addition
- 2.4.11 Focus Appearance sets minimum size and contrast for indicators (W3C)
- Contrast guidance
- Focus indicators should meet at least 3:1 against adjacent colors (WCAG 1.4.11)
- Common mistake
- Removing the default outline via CSS with no replacement (industry-typical)
What does a focus indicator do? #
When a user navigates with a keyboard, focus moves from one interactive element to the next as they press Tab. The focus indicator is the visual marker showing exactly which element is currently focused — the link, button, or field that will respond when they press Enter or Space. Without it, a keyboard user is effectively navigating blind, pressing keys with no idea what is selected. Browsers provide a default focus indicator, typically an outline or glow, precisely because this cue is essential. For sighted keyboard users — people with motor disabilities, power users, and anyone temporarily without a mouse — the focus indicator is as important as the mouse cursor is for pointer users. It is a small visual detail with enormous functional weight, and ensuring it is always present and clearly visible is a core requirement in every accessible /services/web-design and /services/ui-ux-design project we deliver.
Why removing the default outline is a problem #
One of the most common and damaging accessibility mistakes is removing the browser's default focus outline for aesthetic reasons — often with a single line of CSS like outline: none — and never replacing it. Designers dislike the default outline because it can look inconsistent across browsers, so they strip it. But doing so leaves keyboard users with no way to see where they are, breaking navigation entirely and violating WCAG 2.4.7. The mistake is understandable but avoidable: the goal should be to replace the default with a better-looking, on-brand focus style, not to eliminate focus visibility. If you find outline: none in a stylesheet with no accompanying focus style, that is almost always a bug. We routinely encounter this during a /services/website-rescue or /services/website-redesign, especially on sites built from templates and page builders, and restoring clear focus styles is one of the highest-impact fixes we make.
WCAG requirements for focus indicators #
WCAG addresses focus indicators in several places. Success Criterion 2.4.7 Focus Visible, at Level AA, requires that any keyboard-operable interface has a mode where the focus indicator is visible — the baseline rule that focus must be shown. WCAG 2.2 strengthened this considerably with new criteria: 2.4.11 Focus Appearance sets minimum expectations for how large and how contrasting a focus indicator must be, so a barely visible one-pixel line does not technically pass while failing real users, and 2.4.12 addresses focus not being obscured by other content like sticky headers. Additionally, the non-text contrast criterion (1.4.11) means the indicator should have at least 3:1 contrast against adjacent colors. Together these establish that a focus indicator must not only exist but be genuinely perceptible. Meeting them is straightforward with good CSS, and we build compliant focus styles into our component systems so they apply consistently across a site.
What makes a good focus indicator? #
A strong focus indicator is clearly visible, high-contrast, and consistent. It should stand out against both the element and the surrounding background, meeting at least 3:1 contrast, and be thick enough to notice at a glance — a solid outline or ring of a couple of pixels usually works well. It should not rely on color change alone, since a subtle hue shift can be missed; a distinct outline or a change in shape is more reliable. Consistency matters: using the same focus style across all interactive elements helps users recognize it instantly. The style can and should match your brand — a colored ring, an offset outline, or a background highlight can look polished while remaining functional. Avoid indicators that are easily lost against busy backgrounds or that get clipped by container edges. Designing this once at the system level, as part of /services/ui-ux-design, ensures every button, link, and field across the site has a reliable, attractive focus state.
Focus indicators and contrast #
A focus indicator only works if users can actually see it, which makes contrast essential. WCAG's non-text contrast requirement means the indicator should contrast at least 3:1 with the colors adjacent to it — both the focused element and the background it sits against. A light gray focus ring on a white background, or a thin blue outline on a dark blue button, can technically be present yet be nearly invisible. This connects directly to /wiki/what-is-color-contrast-ratio, since the same luminance principles apply. A robust approach uses a focus style that maintains contrast in every context, sometimes by combining an outer and inner ring in contrasting colors so it stands out on both light and dark surfaces. Testing the indicator against every background it may appear over — hero images, colored sections, dark footers — ensures it stays visible everywhere. We verify focus contrast across all backgrounds during accessibility reviews and ongoing /services/care-plans checks.
Mouse focus versus keyboard focus #
A frequent designer concern is that focus outlines appear when clicking with a mouse, which some consider visually noisy. Modern CSS solves this elegantly with the :focus-visible pseudo-class, which lets browsers show a focus indicator when the user is navigating by keyboard but suppress it for mouse clicks where it is not needed. This means you can have a prominent, accessible focus ring for keyboard users without the outline flashing on every mouse click, satisfying both accessibility and aesthetics. It is the recommended approach because it removes the usual excuse for stripping focus styles entirely. Importantly, :focus-visible should enhance the experience, not be used to hide focus from keyboard users — the indicator must still appear for anyone navigating with a keyboard. Using :focus-visible correctly lets us give clients clean visuals and full keyboard accessibility at the same time, which we implement as standard in modern builds and during a /services/website-redesign.
:focus-visible {
outline: 3px solid #1a73e8;
outline-offset: 2px;
border-radius: 2px;
}
/* Suppress the ring for mouse clicks only, keep it for keyboard */
:focus:not(:focus-visible) {
outline: none;
}Focus order and managing focus #
A visible focus indicator is only useful if focus moves logically. Focus order should follow the visual and reading sequence of the page, generally top to bottom and left to right, so that as users Tab through, the highlighted element moves predictably. When interactive components like modals, menus, and multi-step forms open, developers must manage focus deliberately: moving focus into a dialog when it opens so the user is not stranded behind it, keeping focus within it while open, and returning focus to the triggering element when it closes. Skip links, which jump focus to the main content, also rely on the indicator being visible when they receive focus. This ties closely to /wiki/what-is-keyboard-navigation, since a visible indicator and a sensible focus order work together — one shows where you are, the other ensures where you go makes sense. We test focus movement through every interactive flow to confirm both the indicator and the order behave correctly.
How to check your focus indicators #
Testing focus indicators requires no special tools — just a keyboard. Load your site, press Tab repeatedly from the top, and watch carefully: every interactive element should show a clearly visible indicator as focus reaches it, and you should never lose track of where you are. Pay attention to elements over images, colored sections, and dark backgrounds, where a weak indicator can vanish. Check custom components like dropdowns and modals, which often lose focus styling. Confirm the indicator is not clipped by container edges or hidden behind sticky headers. If any element shows no visible change when focused, or if the change is too faint to notice, that is a failure to fix. Automated tools such as our /tools/website-grader and /tools/ada-compliance-checker can flag missing outline styles, but manual keyboard testing is the definitive check. We include this in every accessibility audit and recommend it after any design change through /services/care-plans.
FAQ
What is a focus indicator?
A focus indicator is the visible cue — an outline, ring, or highlight — that shows which interactive element currently has keyboard focus. It tells keyboard users where they are on the page and what pressing Enter will activate, functioning like a mouse cursor for keyboard navigation. WCAG requires it to be visible and sufficiently contrasting on every interactive element.
Is it OK to remove the focus outline with CSS?
Only if you replace it with an equally visible, on-brand focus style. Removing the outline with outline: none and adding nothing back strands keyboard users and violates WCAG 2.4.7. The right approach is to design a clear, high-contrast custom focus indicator, often using the :focus-visible pseudo-class so it appears for keyboard users but not on mouse clicks.
What does :focus-visible do?
The :focus-visible CSS pseudo-class lets browsers show a focus indicator when the user is navigating by keyboard while suppressing it for mouse clicks, where it is unnecessary. This gives keyboard users a clear, accessible focus ring without the outline flashing on every click, resolving the common tension between aesthetics and accessibility. It must still show focus for anyone using a keyboard.
How much contrast does a focus indicator need?
Under WCAG's non-text contrast requirement, a focus indicator should have at least 3:1 contrast against adjacent colors — both the focused element and the surrounding background. WCAG 2.2's Focus Appearance criterion adds minimum size and contrast expectations so faint, thin indicators do not pass while failing real users. Test the indicator against every background it may appear over.
Does WCAG 2.2 change focus indicator rules?
Yes. WCAG 2.2 added Focus Appearance (2.4.11), which sets minimum size and contrast for focus indicators so they are genuinely perceptible, and Focus Not Obscured (2.4.12), which requires that focused elements are not hidden behind sticky headers or other content. These strengthen the older Focus Visible requirement from earlier WCAG versions.
How do I test my focus indicators?
Use a keyboard: press Tab through the whole page and confirm every interactive element shows a clearly visible indicator as focus reaches it, including elements over images and dark sections. Check custom widgets, which often lose focus styles, and ensure the indicator is not clipped or hidden. Automated tools help, but manual keyboard testing is the definitive check.
Was this helpful?