Focus State Indicators That Actually Work

Keyboard navigation matters. Discover how to design focus states that are visible, clear, and don’t look like an afterthought. Includes code examples and best practices.

8 min read Intermediate March 2026

Website interface showing blue focus ring around interactive buttons and form fields for keyboard navigation

Why Focus States Get Ignored

Here’s the thing about focus states â€” they’re invisible to mouse users. So designers skip them. They make a mental note to add focus styling “later” and then ship the site without it. The keyboard user? They’re left clicking around in the dark, unable to tell where they are on the page.

But this isn’t just an accessibility issue. It’s a design problem. A good focus state tells users exactly where they are and what’ll happen if they press Enter. It’s the difference between a website that feels confident and one that feels broken.

Person using keyboard to navigate a website interface, focusing on the Tab key

The Three Rules of Visible Focus

Not all focus states are created equal. We’ve learned what actually works.

High Contrast

Your focus ring needs to pop. A 4.5:1 contrast ratio minimum between the focus indicator and background. That means if you’re on a light background, use a dark color. If you’re on dark, use light. No subtle stuff.

Clear Outline

Avoid thin 1px outlines. They disappear on screens with higher pixel density. Use at least 2-3px, and better yet â€” use a 2px outer outline plus a 1px inner outline for depth. The outline should be obvious, not decorative.

Consistency

Every interactive element needs the same focus treatment. Buttons, links, form fields, checkboxes â€” they’re all keyboard-navigable, so they all need focus indicators. Users should never guess what’s focusable.

How to Implement Focus States Properly

The simplest approach? Use the :focus-visible pseudo-class. It’s built for keyboard navigation and won’t trigger on mouse clicks. You’ll want a border or outline that’s at least 2-3 pixels wide, with enough space from the element edge.

Don’t remove the default browser outline without replacing it. That’s the #1 mistake we see. Sites strip the outline with outline: none; and never add their own. Keyboard users suddenly have nothing to navigate with.

Instead, define your own focus style. Use a box-shadow or outline property. Add a small offset so the focus ring sits outside the element. This works for buttons, links, form fields, and custom components.

Code editor displaying CSS focus state styling with outline and box-shadow properties highlighted

Real Code Examples That Work

Here’s what we recommend. You can adapt these patterns to your design.

For Buttons

button:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

Simple, effective. The 3px outline is visible at any resolution. The 2px offset keeps it from overlapping the button edge. That blue works on light backgrounds â€” adjust the color for your design.

For Links

a:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 4px;
}

Links get a 2px outline since they’re smaller targets. The 4px offset prevents the focus ring from sitting too close to the text. Using a distinct color (red here) helps users distinguish it from button focus.

For Form Fields

input:focus-visible,
textarea:focus-visible {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}

Form fields often have borders already. Change the border color on focus and add a subtle shadow for depth. The rgba gives a soft glow without being distracting. Users see immediately that the field is active.

Developer using Tab key to navigate through website interface, demonstrating keyboard focus testing

Testing Your Focus States

Don’t just look at your site with a mouse. Plug in a keyboard and use Tab to navigate every single page. You’ll spot problems immediately. Is the focus ring visible? Can you tell where you are? Does it feel like the site is responding to you?

Test on different backgrounds too. A focus color that pops on white might disappear on a light gray section. We recommend testing on the lightest and darkest sections of your design. If it works on both, you’re good.

Use browser DevTools to disable styles temporarily. Open the Inspector, find the focused element, and toggle CSS off. Can you still tell it’s focused? If not, your focus indicator isn’t prominent enough.

When Context Matters

Focus states need to adapt. A navigation menu on a dark background needs a light focus indicator. The same site’s sidebar on a light background needs a dark one. Don’t use the same focus color everywhere.

Modal dialogs are another case. The focus ring needs to stay visible even when the modal has a semi-transparent backdrop. Use a stronger color or thicker outline if needed. Users shouldn’t have to squint to see where they are.

For custom components â€” dropdowns, carousels, tabs â€” make sure every interactive element inside has a focus state. It’s easy to forget the next/previous buttons on a carousel or the individual tab options. But keyboard users will try to reach them, and they deserve to know when they’re focused.

The rule is simple: If a mouse user can click it, a keyboard user should be able to see when it’s focused. No exceptions.

Make Focus States a Design Priority

Focus states aren’t a nice-to-have. They’re part of basic usability. A site without them isn’t finished â€” it’s broken for keyboard users. And keyboard users include people with mobility disabilities, people who prefer efficiency, and screen reader users who navigate with the keyboard.

Start with the three rules: high contrast, clear outline, consistency. Test with your keyboard. Adjust colors for your background. And most importantly, don’t ship a site without focus states. Your users will thank you.

Want to learn more about accessible design? Check out our guides on colour-blind friendly palettes and readable font sizes.

Explore Colour-Blind Friendly Palettes

About This Guide

This article provides educational information about web accessibility and focus state design. The examples and recommendations are based on WCAG 2.1 guidelines and current web standards. While we’ve tested these approaches extensively, specific implementations may vary depending on your design system, framework, and target audience. Always test your focus states with real keyboard navigation and verify compliance with your regional accessibility requirements. For detailed technical specifications, consult the official WCAG documentation and your local accessibility standards.