Visibility and clickability of links on white backgrounds an issue for low vision users

[tombye]

Description of the issue

The link style doesn't have a sufficient contrast on a white background for low vision users and there is not enough of a visual cue to the link being clickable.

This was reported by the 'Low vision' tester at the Digital Accessibility Centre (DAC), in an audit commissioned by GOV.UK Notify. They were talking about links in our side-navigation, which have no underline by default, but I think their comments apply equally to all uses of the link style.

They were reporting on this side-navigation:

Their comment was:

When viewing this page, I struggled to see the five links on the left-hand side of the page. This affects me because of my eye condition the thin light blue text fades into the white background causing them to become blurry therefore, preventing me from reading the information provided. It would benefit me that the text is displayed in a darker colour and made bold so they standout more clearly to read.

The left-hand navigation links are displayed using a light blue contrast with the custom NTA font. These links used throughout GDS products provide a difficult reading experience for low vision users as the transparent look to the NTA font impacts text clarity. With the difficult reading of links, using the mouse to access a required link can prove problematic. With the mouse pointer frequently being lost, a low vision user heavily relies on call-to-action focus to ensure correct links are being accessed. Displayed in a list, navigating this list becomes difficult is no call-to-action focus is noticed. In this example, an underline is presented on contact with the mouse pointer. The issue I had with this is that I did not initially see it. The underline is thinly presented and displayed with the same low contrast transparent blue. The call-to-action focus is not sufficient for easy notification. This can be improved by adding weight to the underline to produce a bolder and more visible focus needed for accurate navigation to which would be welcomed throughout these pages. Improved call-to-action enhances user/page interaction to increase overall UX of any website.

I think this can be summarised as the following issues:

• the link style on a white background makes the text hard to read
• the cursor changing over the clickable area of links is not enough of a cue to know they can be clicked
• the link style on a white background makes the underline hard to see

Steps to reproduce the issue

Because the issue seems to occur for users with a visual impairment, I would guess that you would need to test with those types of users.

Actual vs expected behaviour

The tester expected to be able to read the content of the side navigation and identifying them as links but found problems reading the text and knowing they were clickable.

Environment (where applicable)

GOV.UK Notify currently uses version 2.13.0 but the tester mentions experiencing this issue on the www.gov.uk website, so likely they were viewing pages using a more recent version.

The tester was using Google Chrome and Microsoft Edge on Windows (latest versions) for the audit but they mention experiencing this issue on mobile devices and other different screens. See their comment in the description for their exact words.

[tombye]

Could possibly be considered alongside these other issues about the size of click targets:

• Tap targets on links within lists are too small
• Consider larger elements for a bigger touch/target size