I Don’t Care What Google Did, Just Keep Underlining Links

I figured I’d lead with my argument right in the title. Even if you read no further, you know where I stand. I’m just going to fill up the rest of this space explaining why anyway.

Background

The Verge posted an article (Google removes underlined links, says goodbye to 1996) telling us Google is removing underlines on hyperlinks in search results, and also suggesting that underlines are oh-so-18-years-ago.

It’s that sentiment (echoed in the article with the ’90s-style underlined links are being removed from Google search results) that makes me worry The Verge is being snide about a usability feature it doesn’t understand. The original heads-up from a Googler wasn’t quite so focused on the underlines.

Why Google’s Almost Plan Works

Google’s search results are almost completely hyperlinks. Google retains a classic indicator of the hyperlink and keeps them all blue (a color contrast ratio of 11.2:1 to the white background and 1.5:1 with the body text) so that users don’t have to learn a color scheme unique to Google. In this context, when users know the page is full of links and the colors are consistent, coupled with Google’s position as a top site on the web, users aren’t likely to get confused about what to click/tap/follow.

Similarly, The Verge has no underlines on its hyperlinks, whether in the navigation or in the content, until the link gets focus or the mouse hovers. This likely isn’t an issue for most users as the in-content links are orangey-red within otherwise black text (a 3.7:1 color contrast ratio to the body text and 3.5:1 contrast ratio to the background). The non-inline links are pretty much all navigation anyway, and removing underlines from navigation links is a de facto standard. In this case, the links can be anywhere in the page content — they don’t benefit from consistent positioning on the page as Google’s links do.

How It Won’t Work for You

My concern is that the average web developer may see Google dropping underlines as an excuse to do it on their own projects, without the context. For example, an article or blog post may be littered with links throughout the content. This doesn’t correspond to the same type of content or organization that you see on the Google search results page. That same article or blog post may also not have a color scheme that makes it appropriate to remove the underlines.

Google misses the mark in that the blue hyperlinks don’t have sufficient contrast with the rest of the text on the page. The layout Google uses, and has used for years, mitigates this as users will quickly (re)discover how links are organized on the page regardless of color or underline.

I mention The Verge’s color contrast ratio above because its orangey-red links will fail Web Content Accessibility Guidelines 2.0 (WCAG) level AA compliance. I am not trying to pick on The Verge here — I can find many sites that will fail that check, including some of my own. But it is worth understanding that removing underlines, to meet even basic accessibility compliance, will require you to step up your game on understanding color contrast.

What You’ll Need to Do

To make it easy, I’ll link to the WCAG notes with a quick description of what you have to do.

Guideline 1.4.1 states that you cannot rely on color alone to convey information (such as when text is a hyperlink).

If you do rely on color, contrast is imperative. Use only colors that would provide 3:1 contrast with black words and 4.5:1 contrast with a white background. I’ve included links to contrast checkers below.

You can read more about how to meet WCAG item 1.4.1, including sample scenarios and yet more links, in the Understanding SC 1.4.1 document.

My Recommendation

Unless you plan to run the necessary color contrast tests, just keep the underlines on your hyperlinks.

Related

• NoCoffee – Vision Simulator for Chrome (added March 25, 2014).
• WebAIM Color Contrast Checker.
• Juicy Studio Luminosity Colour Contrast Ratio Analyser.
• Contrast Ratio by Lea Verou.
• Color Contrast Analyzer Chrome plug-in.
• Use Adobe Photoshop proofing features to simulate color blindness.
• G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
  • Links with a 3:1 contrast ratio with surrounding text, which also shows 26 web safe colors to use with black or white text.
• F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
• Making Accessible Links: 15 Golden Rules For Developers at SitePoint (note rule 11), February 20, 2014.
• To Underline or Not Underline Links, March 9, 2012.
• Keep the Underline at WebAxe, April 14, 2013.
• Do Links Need Underlines? by Jared Spool, July 5, 2006.

Update: 4:50pm

I think this point is worth considering:

Top web #a11y experts keep text link underlines in main content of their websites: @webaim @paciellogroup @feather @w3c_wai @accessiq

— Web Axe (@webaxe) March 14, 2014

Update: March 17, 2014

On the WebAIM mailing list Elizabeth J. Pyatt points out that the Google’s link underlines don’t work for keyboard users. The underlines appear when you hover over a link, but if you tab through the links no underlines appear. I’m a twit for missing this, but Google is committing a grave accessibility mistake by not including a :focus selector in its CSS.

Again, please don’t follow Google’s lead.

Update: November 10, 2014

Nielsen Norman Group published a new report, Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency, that I think supports the need for link underlines in its summary (the entire piece does, but the summary is brief), despite its focus on flat design:

Summary: Clickable UI elements with absent or weak visual signifiers condition users over time to click and hover uncertainly across pages—reducing efficiency and increasing reliance on contextual cues and immediate click feedback.

Update: May 9, 2016

The Telegraph is reporting that Google is testing black links now.

The article suggests Google is doing some A/B testing. While Google has a very large (incredibly large) set of users against which to test, I am wary of the parameters of such testing.

Specifically, those parameters should be bounded by WCAG guidelines. By dropping underlines, Google already ran afoul of Success Criterion 1.4.1 (which is only Level A) which requires something other than color to be used to convey information (such as the presence of a link).

By making the links the same color as the surrounding text, it now pushes that failure even further by not providing a 3:1 contrast ratio between the links and the surrounding text (which is outlined in Techniques for WCAG 2.0 as item G183). The screen shot from The Telegraph shows the black links are not underlined, just in case you wondered about that.

Again, please don’t follow Google’s lead.