Color-Only Focus Audit

Some sites show keyboard focus only by changing the color of a link’s text, for example from dark gray to dark green. Users who cannot tell those two colors apart, including many people with color vision deficiencies or low vision, have no way to see where focus is. WCAG 1.4.1 Use of Color requires that color is not the only visual means of conveying information, and the focused state is information.

Turning it on

This audit is experimental: it is off by default while we validate it against more real-world sites. To enable it, open a site’s Settings, and switch on Include experimental audits under Scan settings. The setting is per-site, and applies to every scheduled and manual scan of that site from the moment you save it.

How the audit works

This check runs as part of the focus appearance audit, which tabs through the page and compares each element’s styles before and after it receives focus. When the text color is the only visible style that changes, this audit measures the contrast ratio between the unfocused and focused colors.

WCAG’s guidance for 1.4.1 treats two colors as distinguishable by lightness, and not by color alone, when their contrast ratio is at least 3:1. So:

• A change between colors under 3:1 apart is reported as a violation.
• A change of 3:1 or more passes.
• A change the audit cannot measure, such as between translucent colors whose appearance depends on the background behind them, is reported as incomplete.

Elements that show any other focus indicator alongside the color change, such as an outline, a border, a box shadow or an underline that appears on focus, are not checked by this audit. An underline that was already there and simply changes color with the text does not count as another indicator.

Reading the results

Violations name both colors and the contrast ratio between them. Incomplete results need human review: look at the focused element against its background and decide whether the change is noticeable.

You can ignore individual elements you have reviewed and accepted using the same ignore feature you use for other issues.

Limitations

The audit only compares the styles the focus appearance audit watches. A focus style that changes the text color and also adds a visual effect outside those styles, such as a CSS filter or transform, is still treated as color only and may be reported even though the effect makes focus visible. Elements beyond the focus loop’s element limit or timeout are not checked.