Focus indicators failing WCAG 1.4.11: real cases and exact fixes

What is a focus indicator?

A focus indicator is the visual signal that shows keyboard users which interactive element is currently focused.

WCAG 2.1 SC 1.4.11 (Non-text Contrast) regulates focus indicators because users navigating with a keyboard must clearly perceive where focus is located.

The minimum required contrast ratio for visible focus indicators is 3:1 against adjacent colors.

Why static accessibility tools often miss these issues

Most static accessibility scanners cannot reliably detect focus indicator failures because the :focus or :focus-visible state only exists during actual keyboard interaction.

To properly validate focus indicators, manual testing with the keyboard is required.

Usually:

Tab

Shift + Tab

Browser DevTools

Contrast analyzers

Real accessibility audit cases

Case 1 — Tourism company

The primary search button had a focus indicator with a contrast ratio below 3:1.

Problem

Keyboard users could…