search

alphagov / govuk_elements

❗️GOV.UK Elements is deprecated, and will only receive major bug fixes and security patches.
https://govuk-elements.herokuapp.com/
MIT License
227 stars 90 forks source link

Link hover colour doesn't meet minimum contrast ratio #546

Closed selfthinker closed 6 years ago

selfthinker commented 7 years ago

When you hover over links, the combination of colours is #2b8cc4 on white. That is a contrast ratio of 3.72 which is less then the 4.5 that is required by WCAG AA.

See Understanding SC 1.4.3 to get confirmation that the minimum contrast ratio also applies to hover states.

 Potential fixes

It would be really difficult to just change the colour. If it gets darker, it would be difficult to tell normal links and hovered links apart. One option might be to make the hover the same style as the focus (darker blue on yellow). Or we could tinker with the underline. Or something else.

I guess that's something for designers (and user researchers) to figure out?

kr8n3r commented 7 years ago

@edwardhorsford is this something designers can figure out and test with the help of user researchers (aka Per) ?

edwardhorsford commented 7 years ago

@igloosi this would be a hard one to test - it's more the sort of thing you might run a large scale A/B test on if we could think of something to measure.

We'll want to consider this one carefully - there's a real risk of making all our links much harder to use / distinguish. Significant bits of GOV.UK don't have underlines on links (something to address separately?). Arguably the main signifier of a link in that case is the colour - but the hover helps reinforce the interactivity for pointer based devices.

The blue on focus is not different enough to be noticeable.

Using the focus colour: govuk-hover-focus-colour

Using an even darker blue: govuk-hover-darker-colour

Another option might be to swap the visited and non-visited colours when hovered. This is a clear change, but I'd worry about making visited links more confusing. govuk-hover-and-visited-colours

markhurrell commented 7 years ago

@selfthinker hey - I realised a few weeks ago that we don't have all the typography and link styles in one place, so it's really hard to see what works or not.

I made a demo page with all the styles, and then have made some changes to make them more consistent and (i think) pass all the relevant WCAG stuff, but also to try and minimise the legibility issues (file should be attached to this comment)

after discussing with ed, im working on three ground rules, with the aim of making the link styles more consistent

  1. all text needs to have 4.5:1 colour contrast with background colour
  2. visual signifiers of something being a link need to have 3:1 colour contrast with normal text
  3. normal browser underlines aren't great for legibility and comprehension

the styles on the demo page • either the link colour or the underline colour have 3:1 colour contrast with the normal text style • semi-opaque underlines become text colour on hover/focus • using medium-style background gradients to mimic underlines, which let us stop them from cutting off characters with descenders • updated the blue, green and orange with the ones from the uk road signs (which have better colour contrast, and look nicer anyway)

would love to chat about these - I've been discussing with some of the design team but not everyone. also, any help with checking browser compatibility would be great

govuk-typography.update.2.html.zip

NickColley commented 6 years ago

Following the launch of the GOV.UK Design System, GOV.UK Elements will now only get major bug fixes and security patches.

This is still an issue in the GOV.UK Design System so I have raised an issue for us to investigate here: https://github.com/alphagov/govuk-frontend/issues/987

Thanks for bringing this up!