The Focus-Indicator Contrast Checker measures whether your keyboard focus ring stands out enough from the colours around it. A focus indicator that blends into the background leaves keyboard users unable to tell where they are — a real failure of WCAG 2.2 SC 1.4.11.
How it works
Contrast is always a relationship between two colours, so you supply the focus-ring colour and the adjacent colour (usually the page or component background). The tool then applies the official WCAG algorithm:
- Parse each colour to its sRGB channel values (0–255).
- Normalise each channel to 0–1, then linearise it: if the channel
c≤ 0.03928, usec / 12.92; otherwise use((c + 0.055) / 1.055) ^ 2.4. - Combine into relative luminance:
L = 0.2126·R + 0.7152·G + 0.0722·B. - Compute the ratio
(L_lighter + 0.05) / (L_darker + 0.05).
The result is compared against the 3:1 minimum for non-text contrast. Anything at or above 3:1 passes.
Example
A blue focus ring #2563eb on a white background #ffffff has luminances of about 0.108 and 1.0, giving a ratio of (1.0 + 0.05) / (0.108 + 0.05) ≈ 6.6:1 — comfortably above 3:1, so it passes.
Notes
- Contrast alone is not enough: SC 2.4.11 (AAA) also wants the indicator to be at least a 2px-thick perimeter. Pair this check with a visual review of ring thickness.
- Test against every background the element can appear on — a ring that passes on white may fail on a dark card.
- For an outline that sits between the component and the page, check contrast against the more demanding of the two adjacent colours.