2.4 Insufficient colour contrast on visible focus indicators (H)

Focus indicator highlighted for the sidebar element on the Monitoring page

FIGURE 2.4: Focus indicator highlighted for the sidebar element on the Monitoring page

Colour contrast ratio highlighted using the Colour Contrast Analyser

FIGURE 2.5: Colour contrast ratio highlighted using the Colour Contrast Analyser

Omron element recieving focus on the monitoring page

FIGURE 2.6: Omron element recieving focus on the monitoring page

Focus indicator highlighted on the Patient Settings page

FIGURE 2.7: Focus indicator highlighted on the Patient Settings page

Colour contrast analyser ratio highlighted for the focus indicator on the Patient Settings page

FIGURE 2.8: Colour contrast analyser ratio highlighted for the focus indicator on the Patient Settings page

2.4.1 WCAG 1.4.11 (AA), 3.2.4 (AA) - Desktop

On different elements through the journey, the visible focus indicator is quite faint and fails to meet the minimum contrast ratio of 3:1 for non-text elements.

For instance, this can be observed on the sidebar element menu on the Monitoring page, with a contrast ratio of 1.4:1 with a blue focus indicator (#00447E) against a dark blue background (#003153). Similarly the navigation elements on the Patient Settings page has a ratio of 2.1:1, with a blue indicator (#75A2D3) against a grey background (#E5E5E5).

While the focus indicator for the Omron logo on the sidebar does achieve sufficient contrast, the styling of the logo along with the thin outline can make it difficult to notice. Users with low vision would find it beneficial if a bolder outline is used.

This relates to WCAG 2.2 success criteria Focus Appearance (Minimum) 2.4.11 which states that the keyboard focus indicator should be clearly visible and discernible. Although, this criteria is not yet be published, it is important to be mindful of this as it is likely that the updated WCAG criteria will be enforce this year.

The focus indicators are also inconsistently designed, with different colours and widths being used on different elements. It would be helpful for users if a consistent pattern is used, since it makes it easier to identify as they continue to use the site.

These issues can pose problems for keyboard users, who rely on the focus indicator to identify where they are navigating to on the page.

2.4.2 Recommendation

Ensure that all interactive elements on the page have a visible focus indicator.

When implementing :hover and :focus effects and other styles , ensure that the colours meet the required contrast ratio of 3:1 for non-text elements.

Implement consistent colour and design throughout all interactive elements of the site.

2.4.3 Spot check: December 2022

This issue is unresolved. Please refer to the recommendation above to fix the issue.