1.4 Visible focus indicator doesn’t meet contrast requirements (H)

1.4.1 WCAG 1.4.11 (AA) - Desktop

The focus indicator throughout the site fails to meet minimum contrast requirements with a contrast ratio of 1.3:1 (with a foreground yellow colour of #FFDD00 and a background white colour of #FFFFFF).

Elements receiving focus should have a minimum 3:1 contrast ratio against the background. Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Insufficient contrast can be problematic in other situations as well, such as when users are using their device in sunlight, or with the brightness turned down.

This is also related to WCAG 2.2 (to be released) success criterion 2.4.11 - Focus Appearance, which states that the focus indicator has a contrast ratio of at least 3:1 against adjacent colors.

Focus indicator highlighted on landing page

FIGURE 1.6: Focus indicator highlighted on landing page

1.4.2 Recommendation

Implement a visible focus indicator that satisfies the minimum contrast ratio of 3:1 against the background as well as against adjacent colours.

We also recommend getting in touch with the GOV.UK Design System and flagging this issue. The currently implemented focus indicator conforms to the GDS guidelines on focus indicators, however the recommended colours fails to meet the minimum contrast ratio. Without the GDS rectifying this issue, government bodies are going to continue to implement this focus indicator, which would lead to an inaccessible experience for many users.