Short answer: A focus indicator shows which link, button or field the keyboard is on, usually with an outline. WCAG requires it to be visible. A solid 2-pixel outline with 3:1 contrast is one way to meet the stricter rules. Never remove the browser’s outline without drawing your own.
What a focus indicator does
People who move through a page with Tab need to see where they are. WCAG’s criterion 2.4.7, at Level AA, asks that any keyboard operable interface has a mode where the keyboard focus indicator is visible.
MDN explains that browsers use heuristics to decide when focus should be evident, for example when someone moves with the keyboard, and many show a “focus ring” in that case. Our keyboard navigation guide covers the rest of a keyboard test.
What WCAG asks of a focus indicator
| Criterion | Level | What it asks |
|---|---|---|
| 2.4.7 Focus Visible | AA | Keyboard focus can be seen |
| 1.4.11 Non-text Contrast | AA | Visual parts of components and states reach 3:1 against the colors next to them |
| 2.4.13 Focus Appearance | AAA | At least the area of a 2 CSS pixel thick perimeter, and 3:1 between the same pixels with and without focus |
From the W3C’s Understanding pages for these criteria, read November 4, 2026.
Criterion 1.4.11 makes an exception when the browser decides the appearance and the author hasn’t changed it. Once you style your own indicator, its contrast is yours to check. Our color contrast checker guide covers how to measure a ratio.
The outline, and how to keep it
MDN warns that setting outline to 0 or none removes the browser’s default focus style. If an element can be interacted with, it must have a visible focus indicator, so add a clear style of your own if you remove the default.
The :focus-visible pseudo-class lets you style keyboard focus without a ring on every mouse click. MDN describes it as useful for a different focus indicator depending on whether people use a mouse or a keyboard.
Size and contrast
For Level AAA, criterion 2.4.13 asks for an indicator at least as large as a 2 CSS pixel thick perimeter of the element. It also asks for a contrast of at least 3:1 between the same pixels with and without focus.
A solid outline 2 pixels thick all around the element meets that size. Check its color against every background it sits on, in light and dark themes, and keep sticky headers from covering it. Our WCAG 2.2 guide covers that last rule.
How to set a focus indicator
- Search your styles for outline: none or outline: 0 on links, buttons and fields.
- Wherever you remove the default, add a visible outline in its place.
- Style :focus-visible so keyboard focus shows and mouse clicks stay clean.
- Make the outline at least 2 pixels thick, all around the element.
- Check 3:1 contrast against each background, in both themes.
- Use outline rather than border: MDN notes outlines take up no space, so nothing on the page moves.
- Press Tab through every page type and confirm you always see where you are.
How our own focus indicator measures up
On November 4, 2026, we checked three of our pages in the light and dark themes, on a computer and on a phone, pressing Tab 14 times in each view. On our guides and our contact page, our style draws a solid outline 2 pixels thick around focused links, buttons and fields, 1 to 3 pixels away from them. Some elements keep the browser’s own ring.
Against the background around it, that outline reached at least 4.86:1 in the light theme and at least 5.03:1 in the dark one, above the 3:1 WCAG asks for.
Our home page keeps the browser’s own focus ring on its header links. Measured by pixels, with and without focus, it reached between 9.42:1 and 19.47:1 in both themes.
Before you publish
- No link, button or field loses its outline without a replacement.
- Keyboard focus shows on every interactive element.
- The outline is at least 2 pixels thick.
- It reaches 3:1 against the colors next to it.
- It holds in the light and dark themes.
- Nothing fixed on screen hides the focused element.
RememberA focus indicator is what guides keyboard users through your page. Keep the browser’s ring or draw your own, and check it on every page type in both themes.
Pages that work well with a keyboard are part of our web design service.
Quick answers about focus indicators
What is a focus indicator?
The visible mark, usually an outline, that shows which link, button or field the keyboard is on. Without it, people who use Tab can’t tell where they are on the page or what Enter will activate.
Is a visible focus indicator required?
Yes. WCAG success criterion 2.4.7, at Level AA, asks that any keyboard operable interface has a mode where the focus indicator is visible. Removing the browser’s outline without a replacement breaks it.
Can I hide the focus ring when people click with a mouse?
Yes, with :focus-visible, as long as keyboard focus stays visible. MDN explains that browsers use heuristics to show focus when it helps, such as when people move with the keyboard. That lets you style keyboard focus without a ring on every click.
How thick should a focus outline be?
WCAG 2.4.13, at Level AAA, asks for an indicator at least as large as a 2 CSS pixel thick perimeter of the element. A 2-pixel outline all around the element meets that size.
What contrast does a focus indicator need?
At least 3:1. WCAG 1.4.11 asks for 3:1 against the colors next to it, and 2.4.13 asks for 3:1 between the same pixels with and without focus. Check it in light and dark themes.
Sources
Read on November 4, 2026. W3C Web Accessibility Initiative: Understanding SC 2.4.7 Focus Visible (Level AA), Understanding SC 1.4.11 Non-text Contrast (Level AA) and Understanding SC 2.4.13 Focus Appearance (Level AAA). MDN Web Docs: :focus-visible CSS pseudo-class and outline CSS property. Our case: our own pages, tested in a browser on November 4, 2026.