Skip to main content

Focus appearance explained

First posted in Accessibility; updated 22nd September 2022

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.11 Focus Appearance.

I cover it in my over-simplified explanation of WCAG 2.2, but this is one where it’s worth going into more detail.

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

There are two ways to indicate focus:

  1. An outline
  2. A shape

I’m going to run with the outline approach as that’s the one most designers are likely to use.

The focus outline should:

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

Colour contrast

The colour of the focus indicator is important too, so that it stands out nicely. The contrast ratio must be at least:

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

There’s a wee bit of flexibility here, but I’d keep it simple and use those three rules. If you really want to know, the contrast ratio can be less than 3:1 against the element that has focus, and the element in its unfocused state, but the indicator must be at least 2px thick.

An example would be a button, where the indicator might be the same colour as the button (1:1), but if the button grows by 2px along all four edges, that’s allowed. There still has to be enough contrast against the background, though: you need to be able to see that the element is bigger!

Subscribe

I send a 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. It’s good to make mistakes

    As a designer and developer I’ve made countless mistakes, but that’s part of the reason I’m good at what I do.

  2. Here, here, and here

    Every now and again I read an article that links to multiple places, and each link is a separate word in a short phrase. I’m not a fan.