WCAG 2.2 Focus Appearance Checker (2.4.13)
Check a focus outline against WCAG 2.2 Focus Appearance. Enter the component size, outline width, offset and colours to get the indicator area compared with a 2 px perimeter, the 3:1 change-of-contrast verdict, and a :focus-visible rule that passes.
Component
Unfocused size in CSS px.
Focus indicator
As set by outline and outline-offset.
Colours
Preview
2.4.13 Focus Appearance (AAA)
- Area: 688 px² painted vs 640 px² needed (4w + 4h)Pass
- Change of contrast, focused vs unfocused pixels: 5.98:1 (needs 3:1)Pass
- OverallPass
Adjacent contrast
1.4.11 good practice for the indicator itself.
- Indicator vs page background: 5.98:1Pass
- Indicator vs component: 4.83:1Pass
CSS
:focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
}Rounded corners trim a little area from the ring; this calculation assumes square corners. 2.4.11 Focus Not Obscured (AA) is separate: check that sticky headers and banners never cover the focused element.
Why use the Focus Appearance Checker
Private by design
No account needed. What you type stays in your browser unless you ask for an AI suggestion or name a URL to fetch.
Exact WCAG 2.2 thresholds
Each check uses the success criterion's own numbers, such as 4.5:1, 24×24 CSS px or a 2 px perimeter, with no rounding up into a pass.
Named criteria
Verdicts cite the success criterion they test, so a result can go straight into an audit report.
Frequently asked questions
What does WCAG 2.4.13 Focus Appearance require?
When a component has keyboard focus, the indicator must be at least as large as the area of a 2 CSS px thick perimeter of the unfocused component, and have at least 3:1 contrast between the same pixels in the focused and unfocused states. It is level AAA in WCAG 2.2.
How is the 2 px perimeter area calculated?
For a rectangle it is 4 × width + 4 × height. A 100 × 40 button needs at least 560 square CSS pixels of indicator. A 2 px solid outline at zero offset paints 576, so it passes; a 1 px outline paints 284 and fails.
Does outline-offset help?
Yes. An outline drawn further out has a longer perimeter, so the same thickness covers more area. A negative offset pulls the indicator inside the component, which shrinks it, and changes which pixels it covers: the 3:1 change of contrast is then measured against the component's own colour rather than the page background.
Do dashed or dotted outlines count?
Only the painted part counts as indicator area, so gaps between dashes do not. Browsers do not standardise dash length; this tool counts dashed and dotted outlines at 50% coverage and double at two thirds. Treat those as estimates and prefer solid outlines when you are near the threshold.
How is this different from 2.4.7 and 2.4.11?
2.4.7 Focus Visible (AA) only requires that some indicator is visible. 2.4.11 Focus Not Obscured (AA, new in 2.2) requires that the focused element is not entirely hidden behind sticky headers or banners. 2.4.13 is the one that sets a measurable size and contrast for the indicator itself.
Updated · Built by Niraj Kumar
More free SEO tools
All-in-one studio
Every tag in one editor
WCAG Contrast Checker
WCAG 2.2 colour contrast, AA & AAA
Target Size Checker
WCAG 2.5.8 24×24 and spacing maths
WCAG 2.2 Checklist
All 86 success criteria, tracked
SEO Checker
Audit any live URL
Open Graph Generator
Rich link previews
Twitter Card Generator
Large image cards for X