On Link Underlines

Captain Picard meme, overlaid with the text "the underline must be drawn here."

TL;DR: In general, I recommend underlining links in body content. In the absence of a better style appropriate for a specific site, this is the way to go.

Overview

It is amazing to me how this suggestion causes so much angst and fighting. Designers often argue that they look ugly, some users claim they are distracting, others even claim they reduce accessibility.

I’ve tried to gather some information here to allow you to make your own judgment, which may or may not end up matching mine. If you understand the resources I provide and still do not agree, that is fine. However, if you understand the resources I provide then I suspect you will at least style links in a way that makes them usable.

Remember, this is for addressing how links are styled in the body of a page, the narrative content, where they sit among blocks of unlinked text. Not navigation, not footers, not page controls, etc.

Fair warning, this is a lengthy post. I’ve broken it into six sections:

  1. Accessibility
  2. Usability
  3. Academic Research
  4. Other Sites
  5. Styling Options
  6. Recommendation
  7. Updates

1. Accessibility

A set of rules on how to visually present links is available. Whether or not you care about accessibility, it offers guidance (and you really do have to address accessibility anyway). I use that as a the baseline to set some parameters so it is a good place for us to start.

The Web Content Accessibility Guidelines (WCAG) 2.0 (the basis for Section 508 in the US, some international regulations, and the ADA guidelines that the DoJ has used in recent lawsuits) have some guidelines on this.

Success Criterion (SC) 1.4.1: Use of Color:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

In short, links should not rely on color alone to indicate that they are links. This is a Level A requirement.

Level A means this is the minimum level of conformance. Level AA is the next level of conformance and encompasses all of Level A. You cannot meet Level AA without meeting Level A.

All lawsuits have settled at Level AA (and Level A by extension) and most guidelines based on WCAG 2.0 use Level AA as the base level of support.

Guidelines

Conveniently, there are guidelines to meeting SC 1.4.1, and they provide examples.

G182: Ensuring that additional visual cues are available when text color differences are used to convey information:

  • The default formatting for links on a page includes presenting them both in a different color than the other text on the page underlining them to make the links identifiable even without color vision.
  • An article comparing the use of similar elements in different markup languages uses colored text to identify the elements from each language. Elements from the first markup language are identified using BLUE, bolded text. Elements from the second are presented as RED, italicized text.
  • A news site lists links to the articles appearing on its site. Additional information such as the section the article appears in, the time the article was posted, a related location or an indication that it is accompanied by live video appears in some cases. The links to the articles are in a different color than the additional information but the links are not underlined, and each link is presented in a larger font than the rest of the information so that users who have problems distinguishing between colors can identify the links more easily.
  • Short news items sometimes have sentences that are also links to more information. Those sentences are printed in color and use a sans-serif font face while the rest of the paragraph is in black Times-Roman.

Regardless of other visual cues, content links must still have sufficient contrast from the surrounding text.

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:

With this technique, a relative luminance (lightness) difference of 3:1 or greater with the text around it can be used if additional visual confirmation is available when a user points or tabs to the link. Visual highlights may, for example, take the form of underline, a change in font style such as bold or italics, or an increase in font size.

While using this technique is sufficient to meet this success criteria, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with black/white color blindness. If there are not a large number of links in the block of text, underlines are recommended for links [emphasis added].

Since this technique was written prior to touch interfaces, the allowance for underlining only on hover or focus is generally considered insufficient given that touch devices (generally) don’t offer those options when used without a keyboard or mouse.

2. Usability

Underlines have been evaluated more than once by organizations curious how they (or their absence) affects link use and comprehension. I’ve pulled some bits from the more well-known sources that span more than a decade.

Guidelines for Visualizing Links

Jakob Nielsen is pretty clear in his 2004 statement:

Summary: Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.

He expands on that almost immediately:

  • To maximize the perceived affordance of clickability, color and underline the link text. Users shouldn’t have to guess or scrub the page to find out where they can click.
  • Assuming the link text is colored, it’s not always absolutely necessary to underline it.
    • There are two main cases in which you can safely eliminate underlines: navigation menus and other lists of links. However, this is true only when the page design clearly indicates the area’s function. (Remember: your design might not be as obvious to outside users as it is to your own team members.) Users typically understand a left-hand navigation rail with a list of links on a colored background, assuming it resembles the navigation areas on most other sites.
    • Exception: underlining is essential if you use link colors such as reds or greens, which cause problems for users with common forms of color-blindness.
    • Exception: underlined links are important for low-vision users’ accessibility, so retain underlines if accessibility is a priority for your site or you have many users with low vision.

Formatting Links for Usability

A 2010 article from Jamie Appleseed identifies three basic link usability guidelines, one of which is underlining links.

If you actually want people to click on your links, then you have to make it obvious that they can and should be clicked. Underlining text is the most universal way to indicate.

The argument is simple. If you have links in your content, you put them there for people to click. So make them look like it.

Beyond Blue Links: Making Clickable Elements Recognizable

A 2015 article from Hoa Loranger argues that while underlines may not be necessary, some comparable cue must be evident. Current trends have seen the underline go away, with no generally-understood replacement handy. This increases cognitive load, reduces trust, and increases frustration.

It’s a simple matter of interaction cost: People treat clicks like currency and they don’t spend it frivolously. They guard clicks with care and resent sites that force them to hunt for clickable items, or, even worse, waste their clicks.

[…]

But today’s users have seen hyperlinks and buttons that look widely different. Signifiers can evolve over time as web users gain more exposure to different interaction cues and get to learn these new cues.

[…] A major issue with many flat designs is that one of the strongest clickability signifiers —the 3-dimensionality— is removed from the equation. Textures that users were long relied upon for cues are stripped away, making it difficult for users to determine what is clickable and what is not.

3. Academic Research

Here I gather some research done outside of usability studies, and measured using different metrics than engagement rates, abandonment rates, and so on.

There is no denying that the presence of links within content adds some cognitive load to readers. That is the very nature of hypertext, and arguably the reason somebody is reading some types of content.

Comparing Link Marker Visualization Techniques — Changes in Reading Behavior

The 2003 paper Comparing Link Marker Visualization Techniques — Changes in Reading Behavior by Hartmut Obendorf and Harald Weinreich looks at the impact of link underlines on reading comprehension.

The authors make a compelling point right off the bat that link underlines (particularly those in use in 2003) interfere with the descenders of characters. The paper contains two studies: one exploring underlined text and one exploring hiding links until the user needs them.

The first study concluded that underlines affected readability and that underlines should be avoided when the main goal of the content is comprehension. Since most participants reported scanning a page prior to reading, the underlined links were initially useful. Using highlights performed better than underlines, though the study was not set up to measure if that was a better approach.

The second study suggests hiding all links and making the user depress a button to see them. When reading comprehension and speed alone were measured, the lack of links performed better. When task completion depended on following a link, users performed far worse.

A Comparison of Link Readability Techniques

Karyn Graves performed a survey as the basis for her 2004 paper A Comparison of Link Readability Techniques. The goal was to identify how personal preferences affect the way people would like to see links visually represented.

Participants self-reported that low contrast link colors as compared to surrounding text was problematic, and high contrast colors were distracting. Otherwise most noted that it was easiest to find links that were underlined.

Interestingly, overall read times of the sample articles were improved when links were highlighted. The second-best read times were for samples with underlined links. Readers did not report on comprehension, just read times; clearly underlined links did not slow them down (but seemingly the opposite). Otherwise the results proved inconclusive for recommending an ideal link style.

Cognitive load in hypertext reading: A review

In the 2005 paper Cognitive load in hypertext reading: A review by Diana DeStefano and Jo-Anne LeFevre, the authors perform a meta-analysis of many previous papers from 1999 to 2004 (neither of the two I discussed are in it).

While the authors argue that there is cognitive load just from having links on a page, no statement is made about links being underlined or not. In addition, the authors find results that say comprehension is a function of the readers’ goals — straight comprehension versus searching or scanning.

The authors posit that previewing links (via pop-up windows or hover overlays) might reduce cognitive load by offering users a cue of where a link will take them. They go on to suggest text labels and icons as options as well. In the end, the authors conclude that links that are simply underlined perform no worse or better than obfuscated links nor links with labels/icons.

Arguably, users who intend to search or scan the content have to bear a greater cognitive load to distinguish links without clear visual indicators (such as underlines) from the surrounding text. Links without underlines and insufficient contrast may even impart more cognitive load as the user pauses to determine if it is even a link (this is clearly speculation on my part).

4. Other Sites

It is not uncommon for people who immediately resist underlines to present examples of major sites that do not use them. Little thought is given to the fact that those sites are major because people are very familiar with them, while the site on which they want to remove links is likely not a major site.

I have already written about how Google dropped underlines and why this is not a free pass to do it on your own sites. The reason is two-fold: everyone knows how Google’s search results work (which are essentially navigation), and Google is still failing the color contrast requirement per WCAG (there is only a 1.64:1 contrast ratio between links and surrounding text).

Amazon is another common example. This is a site that is primarily navigation, where underlines would not be appropriate. The places where there is narrative text do not include hyperlinks in the content, though links immediately following that narrative (such as See all Editorial Reviews) do have underlines. The fact that those links fail the contrast check is rendered moot by the underlines.

Other online retailers are in the same boat as Amazon (Wal-Mart, Target, Apple, etc). Links are primarily used as navigation with little narrative content that, when it appears, is almost always devoid of links. These sites understand that you don’t send people away from the page unless it is in a controlled up-sell or cross-sell, and those links are still navigation.

Social platforms do not use underlines, such as Twitter and Facebook, which is not ideal. Facebook is effectively a product site and promotes links heavily with other techniques, such as images. Twitter has been unfriendly to accessibility for quite some time, but regardless, your site is probably not a singular timeline full of chunked content.

Wikipedia, however, is a good example of a site full of narrative content that is itself brimming with links. Unfortunately, the links fail the contrast check, so the site is also an example of how to do it wrong. Interestingly, Wikipedia’s own accessibility guidelines seem to present all the information needed to know they are violating WCAG 2.0 AA (they want to target AAA), but I will probably have to file a bug to connect those dots.

Note that many content platforms are moving to address link contrast, with Drupal even codifying underlines into core and WordPress discussing it (offline).

5. Styling Options

Even in the world of installed applications (versus web pages), the value of clear indicators is important and stressed in design concepts for software developers, as Microsoft does here:

The challenge is then to keep enough visual clues so users can recognize the links. The fundamental guideline is users must be able to recognize links by visual inspection alone—they shouldn’t have to hover over an object or click it to determine if it is a link.

Underlines are not the only option. We have already identified that more than color alone must be used and that links should be visible with no interaction. Let’s review the options.

Underlines

The drawbacks to underlines noted in the studies come into play when a user has to focus on a piece of text and comprehend it. However, if you are putting links into your content, it is ostensibly for users to follow. Users who scan content are better served with the underlined links.

While descender clipping is still an issue in some cases, default underlines have gotten lighter in browsers and in the case of Safari, the underlines do not intersect with descenders at all.

Some raise a concern that underlines conflict with underscores, which may be a problem in code examples, email addresses, and URLs. So far I have not found font and underline combinations where that is the case. Underscores are visually distinct from underlines (they typically sit on different baselines).

Highlight

Highlighted text performed a bit better than underlines in the studies. This can be an effective technique, provided the link text and the “highlight” background color have sufficient contrast. There are some things to consider:

Border

Wrapping a border around an entire run of text has the same potential issues with wrapping as highlighting does. However, a border just on the bottom allows you to prevent cutting through the middle of descenders.

Bottom borders also give you more choice in color (it need not match the text color) and line style (dotted, dashed, doubled, thicker, thinner). There is a caveat with dotted borders though, they emerged as a pattern to indicate something was an abbreviation or acronym. While best practice is to expand the abbreviation or acronym in the text, the style may persist for abbr and acronym use in the wild. While acronym is now obsolete, it still appears in legacy content.

Gradient Effects

I have seen background gradients used as fancy highlights, but I have also seen them used as more typographically attractive underlines. One example of quasi-underlines uses a combination of text shadows and a linear gradient to have descenders punch through the “underline.”

At the time of this writing, I use a simplified version of that example on my own site. The biggest caveat is that the background color of the content area should be static and known, as your text shadows match it to mimic the look of punching through the line.

As with a highlight, gradients use background styles which can be overridden in Windows High Contrast mode, but you can fall back to underlines within the media query.

Icons

One of the studies tried using icons with some success, but without an icon at the start and end of the text, there was no way to indicate to a user when the link ended.

If you rely on icons to indicate off-site links, downloads, secure pages, email links, etc., then this approach is probably not a good fit. Another catch is that there is likely an additional HTTP request to get the asset (as using icon fonts will confuse screen readers), and the need to account for Windows High Contrast Mode, some sort of description, and maintaining quality and alignment as the text is scaled.

Font Styles

I am aware of sites that have used font styles (italic, bold, size, even small-caps) as well as a few cases of a different typeface itself to display a link.

I caution against this as most of these styles imply something other than a hyperlink. Using larger or smaller text can break the rhythm (line-height/leading in particular) of the page, making it appear disjointed or broken. Using a different typeface can look broken to users, though even if you have a perfect stylistic fit (that is still visually distinct) with the rest of the content, it relies on the browser being able to download and display the typeface.

Changing styles on hover or focus is almost always a bad idea as it can case the text to reflow. In some cases this can even make the link move out from under a mouse pointer, losing its hover style, only to slide back under, gain the hover styles, move out from under…

6. Recommendation

WCAG guidelines tell us to make sure we do not rely on color alone to distinguish links and even explicitly suggest underlines.

Usability researchers and practitioners generally suggest that underlines are the most clear way to indicate a link that lives within content.

Academic researchers confirm that there is a cognitive load to even having links in blocks of content, but when you have them you can reduce additional cognitive load by making them apparent. Underlines performed well.

There are other sites on the web which have set expectations, but many of them likely do not correspond directly to your own circumstance. Additionally, some of them are already violating WCAG, which removes them from consideration as appropriate analogues.

Other styling options can work, but they are not necessarily universal, sometimes requiring users to learn them. They may also conflict with other styles on your site, increasing the effort (cost) for you to come up with usable, novel and progressive indicators.

Given all these factors, I recommend you underline links in your body content. This is a generalized recommendation because there are always exceptions, and I leave it to your read of the information I’ve provided to decide if you are a pretty little snowflake.

Other Suggestions

If you have other ideas, links to academic research, usability studies, corrections, samples, etc. then please share.

7. Updates

I will include updates to things that are related, directly or indirectly, but mostly based on whatever weird logic is dominant in my head on a given day.

January 12, 2017

It seems the CSS Working Group is looking at new ways to control the styling of underlines. This may or may not end up being good for users.

11 Comments

Reply

Nice article–thanks! I’ve been dealing with this same issue quite often lately, and it’s amazing how much resistance there is when I suggest an underline.

Reply

[…] On Link Underlines – Adrian Roselli – http://adrianroselli.com/2016/06/on-link-underlines.html […]

Reply

Excellent write-up. I’ve been giving a lot of thought to addressing the underlining links debate myself, but you’ve covered the bases! I’ve bookedmarked this article so I can refer skeptics to this comprehensive review. THANK YOU.

Reply

Thanks for writing; will surely reference often.

In response to DennisL. Reply

Thanks. I expect I will be referencing it often too.

Reply

Hey Adrian

You cite Jakob Nielsen from 2004. That’s 15-16 years ago. Much has changed since then. People have become more accustomed to links not being underlined. In iOS it’s a feature under the Accessibility settings, to have links in the UI (not webpages) underlined. I’ve activated it on my mom’s iPad, as she isn’t the most tech-savvy person on earth;)

Anyway, I just saw on Jakob Nielsen’s (and his associates) site, that they themselves don’t underline their own links any longer.

Personally I don’t enjoy looking at / using a site that underlines links. They disturb readability. Many browsers render them… hideously. I’ve experiemented with CSS bottom-borders instead of regular “text-decoration: underline” – but I almost always come to the conclusion that it’s better to simply discard the underlines.

I remember reading this link underlining post on Medium a few years ago. It’s a really good (although type-nerdy) read. So good that I recall it in a situation like this, several years later:) Medium went to GREAT lengths trying to achieve beautiful underlining.

Oh, the reason I’m here on your blog reading and commenting on this article: I’ve been working on improving the typography on my site http://www.webmatros.com, including links. The first “version” of my new typography is now live by the way. As always with design/typgraphy: there’s still more work to do, though;)

Good read Adrian!

=)
Oliver @ WebMatros

In response to Oliver Nielsen. Reply

Oliver, consider this a bit of a provisional comment approval. For the following reasons:

  1. The Nielsen post was from 12 years ago, not 15-16 as you claim;
  2. personal preference has little to do with my post, in fact I wrote it to counter any;
  3. you reference a Medium post but link to your own site;
  4. you explicitly state at the end that you are here to promote your own site.

I may come back through and remove the links. Just an FYI.

In response to Adrian Roselli. Reply

Hi Adrian

1: You’re right: 2016 minus 2004 = 12. My bad. I can assure you the error was not intentional, as I’m sure most people have way better arithmetic skills than I do, and would quickly spot such a blatant mistake. My apologies.

12 years is still a long time on a web evolving as fast as it does.

2: I disagree, and I can’t see why you should feel indignant about that. It’s conversation, that’s what I love about blog comments.

3: Ahh! Perhaps THAT is the reason for your assumptions! I had copy/pasted the “<a href…" HTML code, so I didn't have to rewrite it again – and either I have accidentally pasted the wrong clipboard contents (I use a clipboard manager) or forgotten to update the destination URL. Sorry mate!

Linking to something else than what the anchor text suggests, would be so wrong IMO. So again: not intentional, but I can see why it would trigger your “spammer” alarm. Would trigger my own too;)

The link is this one:
medium.design/crafting-link-underlines-on-medium-7c03a9274f9#.qig5vptop

4: No?? You leave me baffled there. What my last paragraph means, is that I read this blog post of yours, when I did my just launched typography redesign, to make up my mind as to whether I wanted to use underlines or not. You can’t blame me for reading your site. I threw the link to my own site in there because I felt it was relevant to the discussion. Self-promotion is perhaps my biggest “anti-skill” right after the #1 spot, arithmetic, mentioned above.

Feel free to remove the links. I feel like an idiot taking time to find those links and format them with HTML for the pleasure and ease of your readers. If you look at my comment again, with just a tad more faith in me and humanity; you should realize that my comment has zero self-promotional value, nor intent. I’m saddened that you read it that way.

I carefully vet comments on my own blog, and never allow comments that are obviously placed to promote some new product, etc. So your attitude towards my comment is 100% aimed at the wrong guy.

Oliver

Reply

Oliver,

2. I do not feel indignant about the conversation. My point was that in the context if this post, personal preferences will fall on (my) deaf ears.

4. I am going on your statement “Oh, the reason I’m here on your blog reading and commenting on this article” and then linking to your site. Yes, you are sharing your typography example. I see that.

Reply

Hi there,

Great post on current state of link :) This is very complete

I worked on the gradient effect for underlines a while back and ran into a few issues: selecting text is weird because of text-shadow not matching background anymore; AT or user settings removing background can make underlines disappear; also on Chrome and Blink, color change on :hover, :focus won’t impact underline even if you used currentColor keyword; and more over a standard CSS property is on its way (text-decoration-skip as mentioned in your last update).

I made a pen trying to solve all of those issues: http://codepen.io/ffoodd/pen/jbRMqJ (especially a Modernizr test for hight contrast mode).
But as you can see, that makes a lot of code to implement properly a simple effect… So I went back to the good old underlines, and added text-decoration-skip: ink; as progressive enhancement :)

I think all those troubles might be mentioned in the post, and I’d love to have your opinion about this :)

In response to Gaël Poupard. Reply

I like a simplified approach, so using @supports is, in my opinion, a good start. You do not need Modernizr to check for Windows High Contrast Mode, though. That is a simple media query: @media screen and (-ms-high-contrast: active), @media screen and (-ms-high-contrast: black-on-white), and @media screen and (-ms-high-contrast: white-on-black). I have more detail on how they work in my post CSS Background Images & High Contrast Mode.

Leave a Reply to Oliver Nielsen Cancel response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>