WCAG 2.4.13: Focus Appearance

WCAG 2.4.13 Focus Appearance is a level AAA success criterion from WCAG 2.2. The focus indicator has enough size and contrast: an area at least as large as a 2 pixel perimeter, and a 3:1 contrast change.

A one-pixel grey outline is easy to miss.

How to test

Measure the focus outline thickness and its contrast against the colours next to it.

How to fix

Use at least a 2 pixel solid outline in a dark colour.

Example that fails

The focus style is a 1 pixel #ccc outline.

Example that passes the check

The focus style is a 3 pixel #1a1714 outline.

Shopify

Set a 3 pixel solid outline on :focus-visible in the theme CSS.

WooCommerce

Replace thin focus rings in the stylesheet.

WordPress

Set a thick focus outline in the theme.

Wix

Do not weaken the default focus style with custom CSS.

Related fixes