Operable · 2.4 Navigable

Focus Appearance WCAG 2.4.13 · Level AAA

When visible, the focus indicator must cover at least the area of a 2 CSS pixel thick perimeter of the unfocused component and change those pixels by at least 3:1 between focused and unfocused states. Exempt: indicators the browser draws that the author cannot adjust, and indicators and backgrounds the author has not modified.

Level
AAA
Since
WCAG 2.2
Principle
Operable
Guideline
2.4 Navigable
Try the live demo Open the Contrast Checker Checklist

Live demo

Tab through the sign-in form

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Press Tab to move through the fields, the button and the link. The log reports each focus indicator's thickness and contrast.

Live example

Passes

What happened

    Why it passes

    Focus draws a 3 pixel dark blue outline around the control, 6.7:1 against the white card, so the change is large and easy to spot.

    Why it fails

    Focus draws a 1 pixel light grey outline. It covers about half the area of a 2 pixel perimeter and changes those pixels by only 2.2:1, so it is easy to miss.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes − 1px + 2px

    Fails

    A one pixel outline

    Live preview

    CSS
    button:focus-visible {  outline: 1px solid #1d4ed8;  outline-offset: 2px;}

    The blue contrasts well with white, but a 1 CSS pixel outline covers only about half the area of a 2 CSS pixel perimeter of the button, so the indicator is too small.

    Passes

    A two pixel outline with strong contrast

    Live preview

    CSS
    button:focus-visible {  outline: 2px solid #1d4ed8;  outline-offset: 2px;}

    A solid 2 CSS pixel outline outside the button is larger than a 2 CSS pixel perimeter of it, and on a white page its pixels change from white to #1d4ed8, a 6.7:1 change.

    02

    Fails

    A small change of background shade

    Live preview

    CSS
    button {  background: #2563eb;  color: #ffffff;}button:focus-visible {  outline: none;  background: #1d4ed8;}

    The whole button changes, but #2563eb and #1d4ed8 are only 1.3:1 apart, far below the 3:1 change between the focused and unfocused states.

    Passes

    Two-color ring for any background

    Live preview

    CSS
    button:focus-visible {  outline: 2px solid #ffffff;  box-shadow: 0 0 0 4px #111827;}

    The white ring sits inside a dark ring, each 2 CSS pixels thick. On a light page the dark ring changes its pixels by far more than 3:1, and on a dark page the white ring does.

    Why it matters

    Who it helps

    Sighted keyboard users, especially people with low vision or with attention and memory limitations, can spot the focused element quickly when the indicator is large enough and contrasts clearly with the unfocused state.

    W3C: Understanding 2.4.13

    • Level AAA

      Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.

    • In WCAG versions

      New in WCAG 2.2, published in October 2023.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      No law on this site requires Level AAA criteria for whole sites.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Tab to each component and compare the indicator's area with a 2 CSS pixel thick perimeter of the unfocused component, such as a solid 2 pixel outline around it.
    2. Use a contrast checker to compare the indicator pixels in the focused state with the same pixels in the unfocused state, and confirm a ratio of at least 3:1.
    3. Remember that an indicator drawn inside the component, or thinner than 2 CSS pixels, usually needs extra thickness or coverage to reach the required area.

    Common failures

    Where it breaks

    • A 1 pixel outline or a thin underline is the only focus indicator, covering less area than a 2 CSS pixel perimeter of the component.
    • The focus state only slightly darkens the button background, giving less than 3:1 contrast between the focused and unfocused pixels.

    Related