12.1 Visible focus indicator fails to meet non-text colour contrast requirements (H)

FIGURE 12.1: Visible focus indicator on Search now button on Home page

FIGURE 12.2: Colour contrast analyser highlighting non-text colour contrast fail

12.1.1 WCAG 1.4.11 (AA) - Desktop

When a user navigates to the ‘search now’ button using a keyboard, a white visible focus indicator appears around the button element to help users identify which element they are interacting with. The colour of the white visible focus indicator against the turquoise background fails to meet the minimum colour contrast requirements for non-text elements.

Most people find it easier to see and use UI Components when they have sufficient contrast against the background. People with visual impairments including low vision and colour blindness are especially likely to struggle with controls when contrast is too low.

12.1.2 Recommendation

When implementing a custom visible focus indicator, ensure the colour contrast between adjacent colours meets the minimum colour contrast ratio of 3:1

---