2.4.13: Focus Appearance

What it means

Focus indicators at AAA must be highly visible: sufficient area and contrast. WCAG 2.2 defines minimum focus appearance requirements for size and contrast change.

Thin dotted outlines often fail this level.

How to fix it

• Use focus rings at least 2 CSS pixels thick on the perimeter or equivalent area.
• Ensure focus indicator contrast is at least 3:1 between focused and unfocused states.
• Test focus on both light and dark theme variants.
• Document approved focus styles in your component library.

Quick examples

• Good: Buttons show a 2px solid focus ring with 3:1 contrast against the button fill.
• Bad: Focus is a 1px dotted grey line barely visible on white.
• Good: Dark mode links use a bright focus outline that meets size and contrast rules.
• Bad: Focus indicator is only a slight colour shift below contrast thresholds.