Should links be underlined?

Question

I know Google has shifted away from underlined links except on hover which is fine however when links are buried within a paragraph of text, it may be difficult to discern especially with Colour Blind users.

My DH is one such person and in video games, he can't tell when the Reticule turns red (For when you are hovering over something that can be shot at).

It's a con for Accessibility for sure.

Actually, I am not colourblind at all and it was hard for me to see it the first time I read this post through:

https://ux.stackexchange.com/questions/54385/improving-the-ux-of-this-website

Question: Should links be underlined on ux.stackexchange.com?

I understand it may have been removed as an archaic convention, or to remove clutter but it seems a little difficult for me to understand how that outweighs accessibility.

Answer 1

Yes, really they should. The only reason anyone would chose not to do so is for visual issues relating to readability - too many in-line links potentially slows down and impacts the site readability. This is probably the reason sites like Wikipedia take that approach.

However, adding underlines back in is likely to cause a few complaints. "Why are we trying to keep the few users with sight issues happy to the detriment of everyone else?" . We do still need to provide a good UX to everyone. Accessibility should be to the benefit of everyone, not at the expense of others.

So that means one thing: compromise. How can we make the site more accessible without annoying people who don't currently see any issues?

Well WebAim have some suggestions:

Color alone is not used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.

So, we're part way there currently. The links do underline on hover. But they aren't 3:1 contrast with surrounding text. It's about 2.5:1 currently.

The two colours used for text and links on the main site are #333333 and #2a72ba.

So, lightening the blue a fraction to #3483d1 would fix that issue with contrast between text colour and link colour. However that would then make the contrast between the blue link text and the white background no longer AA accessible.

Therefore we could go the other way; change the body text colour from #333333 to #232323. This fixes both the contrast ratio between text and links, and remains accessible for body text and background contrast.

So, we'll have to go back to the UX SE designers for that one I think! The options are either:

a) Change the overall colour of body text so that they're of a high enough contrast to be distinct against both the surrounding links and the page background.

b) Start underlining the links.