Operable · Level AAA · Introduced in WCAG 2.2
WCAG 2.4.13: Focus Appearance
Published by whatisADA / Grow Wild Agency · Updated
What this criterion means
At Level AAA, a visible focus indicator needs an area at least equivalent to a two-CSS-pixel perimeter and a 3:1 change between the same pixels in focused and unfocused states, subject to stated browser-control exceptions.
A practical example
A thin pale focus ring is easy to miss on a large button. Use a sufficiently large, high-contrast indicator and compare its actual area and state change instead of measuring only the button label.
How to check it
- Identify the visible component or subcomponent receiving the indicator and calculate the reference perimeter area.
- Measure the indicator area that achieves at least 3:1 between the same focused and unfocused pixels.
- Review any unmodified browser-indicator exception and test different backgrounds and clipped containers.
What can be missed
This comparison is between states at the same pixels. It is not simply text contrast or a blanket requirement that every ring be exactly two pixels thick.
Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.