Short answer
Three things at different levels. At Level AA, focus must be visible (2.4.7), the focused component must not be entirely hidden by sticky headers or other author content (2.4.11), and a focus indicator that identifies state needs 3:1 against adjacent colours (1.4.11). At Level AAA, 2.4.13 adds a minimum size — the area of a 2 CSS pixel perimeter — and a 3:1 change of contrast between the focused and unfocused pixels.
Keyboard users — including many people with motor impairments, screen-magnifier users and power users — move through a page one focusable element at a time. The focus indicator is their cursor. If it is invisible, faint, or hidden behind a sticky banner, they cannot tell where they are, and every action becomes guesswork. People with low vision are affected twice: they are more likely to rely on the keyboard with magnification, and less able to see a thin or low-contrast ring. That is why WCAG addresses focus in several criteria rather than one: presence, contrast with surroundings, not being obscured, and, at the enhanced level, size and change.
Criterion 2.4.7 requires a visible focus indicator for keyboard-operable interfaces. Criterion 2.4.11, new in WCAG 2.2, requires that when a component receives focus it is not entirely hidden by author-created content — a common failure with sticky headers, cookie banners and chat widgets that cover the element that has just received focus as the page scrolls. The Understanding document notes that if the indicator itself is fully obscured, 2.4.7 would likely also fail. And because a focus indicator is visual information identifying a component's state, 1.4.11 applies: the indicator needs 3:1 against the adjacent colours. Browser default focus rings are exempt from 1.4.11 while left unmodified, but once a site restyles focus, the new style has to meet it.
Criterion 2.4.13 closes the gaps that 1.4.11 leaves. It requires the indicator's area to be at least that of a 2 CSS pixel thick perimeter around the unfocused component, and the pixels that change to have at least 3:1 contrast between their focused and unfocused colours. The second part is different from adjacent contrast: it compares the same pixel before and after focus. The table works through five treatments. A 2 px dark-blue outline on white passes both measures. A pale-blue outline on white fails both. Darkening a button's fill on focus fails the change-of-contrast test even though the page looks different, because the old and new fills are too similar. The last two rows show how thin margins get on coloured and dark surfaces: a white outline on a brand-blue toolbar just reaches 4.5:1, and the #005FCC outline that scores nearly 6:1 on white only scrapes past 3:1 on a dark page.
Only the part of an indicator that reaches 3:1 counts towards the area. In the W3C's two-colour example, a 2 px black line qualifies on its own even though the grey beside it does not.
Automated tools can find missing outlines but not whether focus is visible in context. Tab through each page from the top with the pointer still, in light mode, dark mode and forced colours mode, at 200% zoom, and on a narrow viewport where sticky elements take up more of the screen. At each stop, check that you can see which element has focus without hunting, that nothing covers it, and that the indicator stands out from both the component and its background. Pay attention to components that manage their own focus — menus, dialogs, carousels, custom selects — which often move focus to an element with no visible style. Screenshots of the focused and unfocused state, compared in the contrast checker, give the change-of-contrast figure.
| Treatment | Focused vs unfocused pixels (3:1 for 2.4.13) | Indicator vs adjacent colour (3:1 for 1.4.11) |
|---|---|---|
| 2 px #005FCC outline on a white page | 5.98:1 met | 5.98:1 met |
| 2 px light-blue #90CAF9 outline on white | 1.74:1 not met | 1.74:1 not met |
| Button fill darkens #1A73E8 → #1557B0, no outline | 1.54:1 not met | 6.94:1 met |
| 2 px white outline on a #1A73E8 toolbar | 4.50:1 met | 4.50:1 met |
| 2 px #005FCC outline on a #121212 dark page | 3.13:1 met | 3.13:1 met |
Why: The page scrolls the focused element behind fixed content.
Fix: Use scroll-padding-top equal to the header height, or keep sticky elements small.
Why: It also removed the keyboard focus indicator.
Fix: Style :focus-visible instead of removing outlines.
Why: The change between focused and unfocused fills is well under 3:1.
Fix: Add an outline of at least 2 CSS pixels that contrasts with its surroundings.
Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.
StandardStrong evidence
WCAG 2.2 success criterion 2.4.11 Focus Not Obscured (Minimum), Level AA, requires that a component receiving keyboard focus is not entirely hidden by author-created content.
Source: Web Content Accessibility Guidelines (WCAG) 2.2; Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum) (WCAG 2.2)
StandardStrong evidence
WCAG 2.2 success criterion 2.4.13 Focus Appearance, Level AAA, requires a focus indicator at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component and a contrast of at least 3:1 between the same pixels in the focused and unfocused states.
Source: Web Content Accessibility Guidelines (WCAG) 2.2; Understanding Success Criterion 2.4.13: Focus Appearance (WCAG 2.2)
StandardStrong evidence
The W3C's Understanding document for 2.4.13 explains that 1.4.11 applies at the same time, requiring the indicator's colours to contrast 3:1 with adjacent colours, and that only the part of a two-colour indicator that meets 3:1 needs to satisfy the minimum area.
Source: Understanding Success Criterion 2.4.13: Focus Appearance (WCAG 2.2)
Colourwise analysisStrong evidence
Showing focus only by darkening a blue button fill from #1A73E8 to #1557B0 gives a change of contrast well below 3:1, whereas a 2 px #005FCC outline on white gives nearly 6:1.
Based on: Computed by Colourwise with the WCAG 2.2 contrast formula applied to focused and unfocused pixel colours; see the table.
Source: Understanding Success Criterion 2.4.13: Focus Appearance (WCAG 2.2); Web Content Accessibility Guidelines (WCAG) 2.2
Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.