Skip to content
aulys.app · accessibility 100read the statement
Aulys

WCAG 2.4.13 · Level AAA

How do I make focus indicators WCAG compliant?

Every interactive element must show a clearly visible focus indicator when reached by keyboard. WCAG 2.2 Focus Appearance (2.4.13) wants an indicator at least as large as a 2px-thick perimeter, with 3:1 contrast against adjacent colors. Never remove outlines without replacing them.

What it is

A focus indicator shows keyboard users which element is currently selected as they Tab through a page.

Why it matters

Keyboard and switch-device users navigate entirely by focus. Without a visible indicator, they are lost — they can't see where they are.

How to fix it

  1. 01Never set `outline: none` without providing a clearly visible replacement.
  2. 02Make the indicator at least 2px thick with 3:1 contrast against both the component and the background.
  3. 03Test by tabbing through every interactive element with the mouse untouched.

How Aulys catches it

Aulys checks that focusable elements in your design define a visible focus state that meets the size and contrast requirements.

Scan your first frame free