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:
Accessibility
Usability
Academic Research
Other Sites
Styling Options
Recommendation
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)
Success Criterion (SC) 1.4.1
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.
G182
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].
G183
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.
Guidelines for Visualizing Links
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.
Guidelines for Visualizing Links
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.
Formatting Links for Usability
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.
Beyond Blue Links: Making Clickable Elements Recognizable
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.
Links: Design concepts
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:
Many sites use background colors to style blocks of inline code or other chunks of content.
Because text is flow content, rounded borders and padding can look broken when links span lines (though there are some hacks and the not-yet-well-supported box-decoration-break).
Windows High Contrast Mode will discard or dramatically change any background colors, so be certain to test and probably define your own (using @media screen and (-ms-high-contrast: active) {} which I cover in more detail here).
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.