Footer hover states - design decision and accessibility concern

Patterns Accessibility
1

Hi Andrei,

After reviewing the V3.14.3 design system update, we like the idea of using --nsw-hover and --nsw-hover-light for hover states. However, our developer has raised a concern regarding colour contrast, particularly for links on dark backgrounds footer and main navigation.

Would you mind to explain the rationale behind this design decision and how it aligns with WCAG 2.1 AA accessibility guidelines?

Thank you!

Link to the components:
https://digitalnsw.github.io/nsw-design-system/components/footer/theme.html
https://digitalnsw.github.io/nsw-design-system/components/main-nav/theme.html

2

Hi @mikegu ,

This is something that we have been in discussions recently with other teams.

The focus state should already comply with (WCAG) 2 Level AA standards.

For hover and visited states, according to the standards, they doesn’t require the 3:1 contrast ratio with the default state.

https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

image
image972×314 40.4 KB

Additionally, even the links on the http://W3.org site, only have a slight color difference which assuming someone with poor vision for colour contrast, wouldn’t be able to tell the two apart.

Open to any recommendations or suggestions though on how we can make them more prominent.

1 Like