1.3 Focus state of button elements doesn’t meet non-text colour contrast requirements (Medium)

1.3.1 WCAG 1.4.11 (AA) - Desktop

The focus state of button elements fails to meet the minimum non-text contrast requirements with a contrast ratio of 1.43 and 1.2 (with a yellow foreground and a grey or white background). As the button elements’ focus state is not denoted using a black underline (as it is with links) it makes it difficult for users to determine which element is receiving focus.

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.

Unfocussed apply filters button highlighted on the homepage

FIGURE 1.3: Unfocussed apply filters button highlighted on the homepage

Focussed apply filters button highlighted with colour contrast analyser open

FIGURE 1.4: Focussed apply filters button highlighted with colour contrast analyser open

1.3.2 Recommendation

We would suggest continuing to use the GDS Design System and pattern library (as it’s been implemented well in many areas), but we would also suggest getting in touch with the GOV.UK Design System to flag this issue so that they can update their design system to better meet the needs of users.

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.