WTFocus
Design a focus indicator and see, while you are still choosing, whether it passes WCAG 2.2. Then copy the CSS, or a link that opens these exact settings for whoever has to build them.
Rebuilt in 2026 from wtfoc.us (opens in a new tab), which was written against the 2.2 draft. Concept by Claudio Luis Vera, design by Marcelo Paiva, and the original code by Marcello Paiva. The case study is under Work.
Focus Styles
Focus Preview
SC 2.4.7 Focus VisiblePasses AA
There is an indicator to see.
SC 1.4.11 Non-text ContrastPasses AA
The ring sits on the page, at 5.20:1. It needs 3:1.
SC 2.4.13 Focus AppearancePasses AAA
About 4.0px of painted ring, against the 2px perimeter it needs, and 5.20:1 between the focused and unfocused pixels, against 3:1.
SC 2.4.11 Focus Not Obscured (Minimum)Not checked here AA
Not something a ring can pass alone. It depends on whether a sticky header or a banner covers the focused control on your page.
Focus trap keeps Tab inside these examples, the way a modal does. Escape lets go.