WCAG 2.2 focus styles

What to check

  1. Focus styles take up an area at least equivalent to at a 1px border around the element.
  2. The change of contrast of the indicator between focused and unfocused states has a ratio of 3:1.
  3. If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.

Some examples

Focus style: outline: solid 1px blue;

  1. ✔️ Focus area is more than a 1px border. (A default outline is around the element, so it's bigger than a 1px border).
  2. ✔️ Contrast of blue on white: 8.59.
  3. ✔️ Focus indicator has contrast of more than 3:1.

Focus style: box-shadow: 0 0 0 1px blue;

  1. ✔️ Focus area is more than a 1px border. (A defaolt outline is around the element, so it's bigger than a 1px border).
  2. ✔️ Contrast of blue on white: 8.59.
  3. ✔️ Focus indicator has contrast of more than 3:1.

Focus style: box-shadow: 1px 1px 0 1px blue;

  1. ❌ Focus area is less than a 1px border.
  2. ✔️ Contrast of blue on white: 8.59.
  3. ✔️ Focus indicator has contrast of more than 3:1.

Focus style: box-shadow: 2px 2px 0 1px blue;

  1. ✔️ Focus area is more than a 1px border (because the offset is 2px in x and y directions).
  2. ✔️ Contrast of blue on white: 8.59.
  3. ✔️ Focus indicator has contrast of more than 3:1.

Focus style: box-shadow: 0 0 2px 1px blue;

  1. ✔️ Focus area is more than a 1px border: the blur is 2px, but it actually spreads a bit more than that.
  2. ✔️ The darkest part of the shadow is 1px wide and is #438af7. That's 3.37 with white, so it just makes the contrast requirements.
  3. ✔️ Focus indicator has contrast of more than 3:1.

Focus style: box-shadow: 0 0 2px 1px rgba(255, 0, 0, 0.5);

  1. ✔️ Focus area is more than a 1px border: the blur is 2px, but it actually spreads a bit more than that.
  2. ❌ The darkest part of the shadow is 1px wide and is rgba(255, 0, 0, 0.5), which is #aabff6. That's only 1.82 with white, so it doesn't make the contrast requirements.
  3. ✔️ Focus indicator has contrast of more than 3:1.

Focus style: background-color: blue;

  1. ✔️ Focus area is more than a 1px border: it's the whole element.
  2. ✔️ The change from lightgrey background to blue background has a contrast of 5.73. (But will fail text on backgroud color contrast! So the text should change to white on focus to fix this)
  3. ✔️ Focus indicator is blue, so it has contrast of 8.59 with the background.

Focus style: text-decoration: none (remove underline) and outline: none

Link
  1. ❌ Focus area is less than a 1px border: it's only as big as 1px x one side of the element.
  2. ✔️ The contrast changes from blue to white (the background colour), so it's 8.59.
  3. ❌ Focus indicator does not have a contrast of more than 3:1, and it not more than 2px thick.