WCAG 1.4.11 AA: Focus indicator has insufficient contrast (Issue 21)

Summary

Via Vision Australia assessment: August 2024

Impact: medium

Noting:

DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au.
While colour contrast can be controlled in-house, these recommendations highlight best practice implementation across the component library.

Steps to reproduce

Global issue digital.gov.au beta | digital.gov.au (https://www.digital.gov.au)

Observed outcome

When certain links receive keyboard focus, a focus indicator is shown as a solid outline around the element. However, the contrast ratio between the purple (#8a5cd7) focus indicator and the adjacent dark grey (#404040) background of the site footer does not meet the minimum ratio required.

• Current contrast: 2.26:1 • Required contrast: ratio: 3:1

Insufficient focus indicator contrast in the site footer

Additionally, the contrast between the purple and the dark blue (#1e3c50) of the promo wrapper has insufficient contrast:

• Current contrast: 2.52:1 • Required contrast: ratio: 3:1

Insufficient focus indicator contrast in the promo banner

Furthermore, when the focus indicator appears over the background image in the banner, varying levels of contrast occur, none of which have a sufficient 3:1 ratio.

Insufficient focus indicator contrast over the banner background image

Code used

CSS

.ct-content-link.ct-theme-dark:focus {
outline-offset: 0;
outline-width: .1875rem;
outline-style: solid;
outline-color: #8a5cd7;
}

.ct-promo.ct-theme-dark {
background-color: #1e3c50;
border-color: var(--ct-promo-dark-border-color);
}

.ct-footer.ct-theme-dark .ct-footer__bottom .ct-content-link.ct-theme-dark:hover {
color: var(--ct-color-dark-background);
}

Why this matters

Keyboard users typically use the Tab key to navigate through interactive content. Having a highly visible focus indicator allows them to easily see what element on the page has keyboard focus.

Focus indicators with insufficient contrast make it difficult for these users, especially those with low vision or colour perception disabilities, to successfully navigate sites.

Expected outcome

Adjust the colours to ensure a minimum contrast ratio of 3:1 between the focus indicator and all adjacent backgrounds.

The CSS box-shadow property can be used in addition to an outline to create a focus indicator that will work against most backgrounds.

Code example

:focus {
outline: 2px solid black;
box-shadow: 0 0 0 4px white;
}

Note 1

When customising focus indicators, it may be necessary to design multiple versions to ensure sufficient contrast with all component and background variations.

Note 2

The Colour Contrast Analyser (CCA) is a free tool that can be used to check the contrast of text and user interface components: Colour Contrast Analyser (CCA) (https://www.tpgi.com/color-contrast-checker/)

civictheme / uikit