Focus indicator has low contrast

Why does it matter?

A focus outline that is there but barely visible, such as a pale blue ring on white, is almost as bad as none. Keyboard users with low vision, or on a bright screen, cannot find it, and lose track of where they are.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What does Lumtera flag?

Measured during the keyboard walk (review mode's Keyboard tab, "Check keyboard access"), on each stop that shows focus: an outline or box-shadow ring with less than 3:1 contrast against the background around it, a border that changes by less than 3:1, or a color change of less than 3:1 (unless an underline or bolder text also appears). Each is for review, with the measured ratio and both colors; similar elements are grouped. Every part that changes is measured and one part with 3:1 is enough, so GOV.UK-style focus (a yellow fill with a dark bar) passes; offset shadows count, and the browser's own default ring, when the theme leaves it untouched, is not reported. Indicators that pass but are thinner than 2 CSS pixels are counted once as a tip about 2.4.13 (level AAA).

Check ID page-focus-contrast, as shown in review mode and saved results.

How do I fix it in WordPress?

Make the focus outline a color with at least 3:1 contrast against the background around the element, for example a 2px solid outline in a dark color on light backgrounds. Set it with :focus-visible in the theme's CSS (Appearance → Customize → Additional CSS, or the Site Editor's Styles).

Example

a:focus-visible { outline: 2px solid #9ec5ff; } /* on #ffffff = 1.8:1 */

a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; } /* on #ffffff = 6.7:1 */

How do I check the fix?

1. Reload the page in review mode and run the Keyboard tab again (or Test menus and pop-ups for menus, dialogs and tabs). The finding disappears once the page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.