A Raleigh Web Design Company Since 2012

Call Us in Raleigh, NC — (919) 438-2180 / hello@addicottweb.com

How Text Links are Styled is Important

Posted on April 16, 2015
by Marcus Fishman

How Text Links are Styled is Important

As a designer, I have to stop and ask myself, why bother styling text links? It’s done so that it is plainly obvious what is a link and what isn’t. That way, the user doesn’t have to spend any additional time than is necessary trying to get to where they want to go on your website.

Early web browsers used to have default styles for text links, which were usually blue and underlined. That’s why you most often see links with those characteristics, so it’s no surprise that this is how people expect text links to look like.

With the advent of CSS a few years ago, web designers began to assert greater control over how those links appeared. That’s been both a good and a bad thing, because with the greater control also came greater variation in how text links were styled.

With that in mind, here are some things to take into consideration when determining how you’re going to style text links on your website.

Contrast Against the Page Background

  • On a lighter background (white, light grey, etc.), use either medium to darker shades of blue or red. Those options generally give the most contrast against the light background.
  • On a darker background (such as black, dark blue, etc.), use very, very light shades of yellows, greens, oranges, blues, grays, or white.
  • Try to stay away from light reds, pinks, etc., since those can be too jarring to the eye in contrast to the background color.

In either case though, the specific choice depends on the color scheme that the designer is working with, so we need to use our judgment about what we think looks and works the best to make the links stand out.

Contrast Against the Text

Most text on websites is either black (on a white background) or white (on a black background). So if your links are already underlined and are a different color than the main text, you’ve done the job right.

But when you’re picking the color of your links, please please PLEASE choose a color with enough contrast so that there is a noticeable color difference between the text and the link!

Using black text? Then coloring your links in navy blue is not going to cut it. At most “normal” font sizes on a website (around 12 pixels in height), the human eye can’t tell the difference between those two colors without straining – for example, can you tell this is a link? How about this instead? And at even smaller font sizes, forget about it.

Links Should. Be. Underlined.

A more recent trend in websites is to not underline text links. A lot of people feel that doing so gives a website a cleaner, more professional appearance. I agree with that result, but I disagree with the concept of not underlining text links.

Links should be underlined because when a text link is in the middle of a chunk of text (or as a headline), even if colored differently it isn’t always plainly obvious what is the link and what isn’t.

Think of people who are colorblind. They could look at a website and not be able to tell the links apart from the text if the links aren’t underlined. So from an accessibility perspective, underlining your links is a good thing.

And, when taken in combination with coloring your links the right way, it takes away any doubt the user might have about what is a link and what isn’t.

There Are Always Exceptions

Keep in mind that as with any particular element in web design, too much of a good thing can sometimes be a bad thing.

Yes, underlining and coloring links appropriately are the right things to do from both a usability and accessibility perspective. But I don’t go crazy having every link underlined on one of my websites if doing so means sacrificing the overall look and feel of the website as a whole.

For example, on the websites I design I usually have the text links underlined, but I don’t underline the main navigational links. When it’s obvious that the word is a link, as in the case of a link in a main navigational area, there’s generally not a need to have it appear underlined.

As a designer, my job is to create websites that are not only usable and accessible, but that look great as well. I have to take all of these factors into account and use my judgment when deciding how to style text links.

But, as long as I keep in mind usability and accessibility principles when making a decision, it’s guaranteed that the overall website will be that much more effective and successful.

About Marcus Fishman

Marcus has been working professionally with websites since 2001, and offers a wide range of website knowledge from his years of experience working with, designing, and building websites. He lives in Raleigh, North Carolina.