Skip to main content

Focus appearance explained

First posted in Accessibility; updated 24th July 2023

There’s some great stuff coming up in version 2.2 of the Web Content Accessibility Guidelines (WCAG), but there’s one rule that’s particularly difficult to understand: 2.4.13 Focus Appearance.

Update: this rule was simplified considerably when WCAG 2.2 moved to ‘Proposed Recommendation’ on the 20th of July 2023; it was also moved from level AA to AAA. So this article probably isn’t very useful anymore!

What the rule applies to

The rule applies to ‘user interface components’, which means:

  • form fields
  • links
  • buttons

Essentially, any element you typically interact with.

Note: this can also include things like horizontally-scrolling tables.

Indicator style

The focus indicator must:

  • be at least 2px thick
  • be a solid line
  • go round the whole element

Colour contrast

The contrast of the focus indicator is covered already in 1.4.11 Non-text Contrast, so it must provide at least a 3:1 contrast ratio against:

  • 3:1 against the background it sits on
  • 3:1 against the element (e.g. a button) that has focus

The focus indicator should also be obvious compared to

  • how the element looked before it had focus
  • other similar elements that aren’t in focus

So Focus Appearance sets the contrast ratio of the focus indicator against the focused element’s unfocused state at at least 3:1.

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. WCAG 2.2 in language I can understand

    A follow-up to my post on the Web Content Accessibility Guidelines 2.1, level AA; this time explaining the nine rules coming up in WCAG 2.2.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.