Should hyperlinks be blue?

  • I've built a site where all hyperlinks have the default colors: blue for links, purple for visited links. They turn red on hover.

    I believe that always using blue for hyperlinks is a good thing, so your users quickly can see what's a hyperlink, and what isn't. However, some of my colleagues disagree and want other colors.

    What are your thoughts on this?

    "Please change the letters in your email to blue, so I can click the link."

    @Loïc Wolff Oh, the ignorance :)

    I don't personally want blue color in my hyper links. when some one hover over a text, if its a link the hand icon appears and everyone knows its a link. Once we stop sticking to the blue and start using other colors for links, it will become a practice.

    Some shade of blue is good, not necessary the default one. For desktop clients, adding underline on hover is nice and makes the color less important, but for mobile clients you need to convey that the link is clickable without any user interaction before.

  • A standard, such as #0000FF for unvisited links and #800080 for visited links, is only good if nearly everyone does it. Otherwise users cannot anticipate when the standard will and won’t be followed and thus can no longer use it to predict site behavior. Unfortunately most web sites do not follow these color standards. In a haphazard survey (not to be confused with a random survey), I find that less than a third of sites comply with the standard. In my experience, users who are relatively new to the web may not even be aware of the standard –it just isn’t something they’ve been able to pick up from their experience. Color has proved to be too important of a graphic attribute for aesthetic and branding purposes for designers to strictly follow the standard. Frankly, it wasn’t a great standard anyway –it’s hard for some users to focus on high-saturation blue text, especially older users. Overall, I don’t think there’s much point to complying with this standard anymore.

    However, it still makes sense to make your links blue in a more broadly defined sense. Over 80% of the sites I surveyed use some shade of blue for link. So while it’s not exactly a standard users can rely on, I believe they will tend to assume bluish is more linkish than other colors. From what I’ve seen you can get away with using a non-blue color for links as long as it is a distinct color (your users shouldn’t have to scrub the mouse over each color text to see if it’s a link or not). However, if it’s at all reasonable to use blue, then go blue.

    Even more important than color choice is to underline your links, at least for links that aren’t in a top or side-bar menu. Over 90% of the sites I looked at use underlining to distinguish links (although often on mouseover only), making it a very consistently followed convention. Underlining also neatly side-steps the accessibility issues of color –including issues involving the small minority of users that are completely colorblind.

    Putting it together, I recommend pretty much the same things Jakob Nielsen recommended six years ago:

    • For a give site, use one color for all unvisited links. Using multiple colors to mean an unvisited link increases the learning burden of your site and makes it harder for users to scan for links to select.

    • By “color” I mean it has a hue -links must not be black, white, or gray. Non-colors indicate non-link text to users.

    • If there is any blue in your site’s palette, then use that blue for links.

    • Never use the chosen link color for non-linking text on the site. This will confuse users on what is and isn’t a link, defeating the purpose of coloring links.

    • Underline all links. Use mouse-over underlining with caution. I would only consider it if links are blue or the links are in a top or sidebar menu.

    • Never underline non-links. Use italic or bold for emphasis instead.

    For sites with static content, research suggests that you show visited links in a different color. However, with no specific color for unvisited links, it’s hard to know what to use for a visited link. Only a third of the sites I surveyed distinguish visited and un-visited links, and most of these don’t use purple for their visited links, so I don’t know how familiar users are with this convention. Color-coding is arbitrary here –there’s nothing about purple per se that means “visited.” Users may be able to infer the meaning once they click on a link and go back and see the color change, but imagine a user who returns to the site a month later, and some links are one color while others are different color –it can be hard to remember which is which.

    All I can suggest is to try to leverage broader user experiences and adopt a “worn”-looking color for visited links. This should have lower color saturation than the color for unvisited links (consistent with the use of #800080 versus #0000FF), but lower saturation by itself is probably not sufficient to make visited adequately distinct from unvisited for all your users. What else? Red-shift the hue like some sites do, consistent with using purple versus blue? Use a lighter color, like other sites do to make the link look “faded”? Use a darker color like still other sites do to make the link blend in more with ordinary text? I think this needs some research, and then we need to make it a standard.

    I think all you need to identify links is a distinct color and text decoration. It doesn't matter what it is. If 98% of the text on the page is black and 2% of the text is orange and underlined, then most people will get that it's a link. If they need any other confirmation, they'll just hover their mouse over it to see if the cursor and status bar changes. But for the majority of users, as soon as they see a word or phrase in the text they're reading with a different color, they immediately understand that it's a link.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM