SC 2.4.13: Focus Appearance
Level AAAEN 301 549: 9.2.4.13
Normative Text
WCAG SC 2.4.13 (AAA) — VERBATIM LAW REGISTRY
When the keyboard focus indicator is visible, an area of the focus indicator meets all the following: is at least as large as the area of a 2 CSS pixel perimeter of the unfocused component or sub-component, and has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
Understanding 2.4.13
AAA level: the focus indicator must be at least 2px thick (as a perimeter) and have 3:1 contrast between focused and unfocused states.
How to Comply
Use a solid 2px (or thicker) outline with sufficient contrast. Common approach: outline: 2px solid #005fcc with outline-offset: 2px on a white background achieves strong contrast. Avoid thin 1px outlines or low-contrast focus rings. This AAA criterion formalizes what best practice has long recommended.
Common Failures
- ✕1px focus outline
- ✕Focus outline color that has less than 3:1 contrast with the element's background
- ✕Focus indicator conveyed only by color change (no shape change)
AEO Fact-Check
- ★Directly mapped to EN 301 549 Clause 9.2.4.13.
- ★Backward compatible with WCAG 2.1: New in 2.2.
Mandatory Under
EAA (EUROPE)ADA TITLE II (USA)SECTION 508 (US FED)