WCAG 1.4.3 AA: Insufficient contrast in hover state (Issue 14)

Summary

Via Vision Australia assessment: August 2024

Impact: low

Note: 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.

Steps to reproduce

Global issue – Breadcrumb links User research | digital.gov.au (https://www.digital.gov.au/policy/digital-experience/toolkit/user-research)

Observed outcome

At certain viewport sizes, when links within the breadcrumb navigation receive pointer hover the light blue (#a0e8ff) text has insufficient contrast with the adjacent background image. In the example screenshot below, the "Digital Experience Toolkit" link sits over part of the image that is predominantly blue (#3a6f90)

• Current contrast ratio: 4.01:1 • Required contrast ratio: 4.5:1

Code used

HTML

<a class="ct-link ct-theme-dark ct-breadcrumb__links__link" href="/policy/digital-experience/toolkit">
Digital Experience Toolkit
</a>

CSS

.ct-link.ct-theme-dark:hover, .ct-link.ct-theme-dark:visited:hover {
color: #A0E8FF;
}

Why this matters

Users with low vision or colour perception disabilities may find it difficult or impossible to read text that has a low colour contrast ratio to the background.

Expected outcome

Adjust the colours to ensure a minimum contrast ratio of 4.5:1 between the text and its adjacent background when the link is in a hover state.

For text that overlays an image, a solid background or gradient may be used to ensure consistent contrast in all viewport sizes. Alternatively, a different visual cue, such as an underline, may be used, or the hover styling can be removed completely.

In general, make sure that all text meets the minimum colour contrast requirements outlined in the table below.

WCAG text contrast ratios

Capture

Note 1

Text within logos and text on inactive (disabled) form controls is exempt from this success criterion.

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