What is the point of styling hyperlinks to be barely distinguishable from body text?

Question

It seems like there is an increasingly popular trend to style hyperlinks in a color that's barely distinguishable from body text. I noticed this just the other day on an SFGate blog page. Also notice that link just a few words ago. Are my eyes getting worse, or is that hard to spot?

I certainly understand styling hyperlinks to look better than browser default styles. But, if they're not easy to see, what's the point of having them in the first place?

My best guess is that designers (or whomever makes the styling decisions) are wary of interrupting eye tracking with colors or other styling that is significantly different than the body text. That would make some sense, but I feel that there's a lot more room for compromise - i.e., styling links to be different enough from the body text that they're easy to spot, while not making them so flashy that they attract the eye to the detriment of easy reading.

Would anyone make the argument that subtle hyperlinks are more effective than more obvious ones? Or, can you point me to any theories or testing conclusions that may justify their use?

---

@Mike Daniels: Thanks for clarifying that the color I'm having trouble differentiating on this site is the visited link color - I hadn't noticed that, but you're right. The unvisited link color is rather prominent, and it makes more sense to me that visited links would blend in more with the surrounding text.

On another note, I'm not sure that I buy the argument that a hover color/effect is enough to properly distinguish a hyperlink. I don't feel that it serves the cause of usability that a user should have to hover over a link to confirm that it is in fact clickable. I think that should be made obvious at a glance.

I actually have a very good IPS-panel monitor and near-perfect vision with my glasses on. I can see the visited links on this page and those on the SFGate blog if I scan for them, but my argument is that it would only take an underline, a different color, or another visual distinction to make the links stand out much more.

What I'm really wondering is why - assuming that the designer(s) on a high-traffic site like SFGate know what they're doing and have made conscious decisions about link colors - they would choose to style the links to resemble the body text so closely? Is there reasoning behind that?

Answer 1

The main navbar is readable , and the sub-navbar is normal text with a while background giving the main navbar visual hierarchy. The page is actually alright.

Answer 2

It depends on what you're trying to accomplish. As a site owner, I might realize (via A/B testing) that a subtler link color increases CTR, reduces bounce rate, etc. .

I do, however, think that differentiating your links only by color might cause some problems for colorblind folks.

Answer 3

ok, in SO the visited hyperlink colour is a bit darker and is harder to distinguish from the unvisited hyperlink colour. But I think inline hyperlink design is a tough question to answer. I mean you want someone to know the hyperlink is there but at the same time, is it more or less important than your content? if its the ultimate destination then maybe making it stand out more (i.e. by underlining it) if its evidence for a point and therefore less important that someone clicks it theres no need. I'd argue a simple colour change would do, maybe make the visited/unvisited links a closer match so that they maintain their visibility in the content.

Answer 4

I didn't realize until Mike Daniels pointed it out that your issue is with visited links, not normally-colored links. Visited links have traditionally blended in more, it's not really a new concept. I think the theory is if you've already visited the link you must know it's there, so there's no reason to draw your attention to it anymore; there are other links you haven't visited yet that you're likely more interested in

Answer 5

I can see the reasoning behind not wanting to have hyperlink styles which strongly clash with the regular text, as they can be distracting while reading. But I think that's rarely a problem. If you look at a site like Wikipedia, the links are very visually distinct from regular text, but it doesn't at all make the text harder to read

So the only real reason to only subtly differentiate inline links from standard text is for aesthetic purposes. I think that's what the SFGate designer has done. The link colors they use are easily differentiable when they are not inline (e.g. the Recent Entries or Categories panes), but they are perhaps harder to pick out in the text.

Since they've already carefully chosen a good color scheme that works aesthetically, and you generally don't want to employ too many different colors in a design or use different-colored links in different places, there's not a lot of options. They could have:

• bolded the links
• underlined them
• used dotted underlines (a nice compromise)
• or use rollovers

All of which would help to differentiate links from text without needing to give the links a brighter color.

But you also have to take into account the type of page it is and the usage pattern of visitors. If you have a lot of inline links, or if users are mainly there to read an article, not follow embedded links, then you don't want the links to draw so much attention. The SFGate blog is more akin to a digital newspaper. It's not a standard news blog where links are the primary content, or Wikipedia, where the embedded links are also a major focus of the site. Basically, the few links in the blog posts are only there to provide a little supplementary info for the curious but are expected to be ignored by most readers. And they do stand out enough so that while reading the article, you will see the links as you come across them.

Answer 6

I can clearly distinguish the link color from the text color. Maybe you should adjust your display settings? I suppose it could be a bit bolder to distinguish it from the surrounding text, but it's ballpark.

It would be nice if the SFGate blog page page used the hover property to provide another visual cue that the thing that I think is a link is actually a link.

Answer 7

Could be one of 2 scenarios, both of which I have experienced.

1. the design agency isn't web savvy and thinks that different coloured texts and (worse) underlines are unsightly and has asked the designer to make the links visibly uniform (you'd be surprised how often I get asked to do this).

2. the text has been SEO'd incorrectly by someone who's about 6 years behind the times and believes that you have to link every instance of a term on a page but with a consideration for the visitor, so they've been styled down.

Answer 8

I'm curious if, similar to something Chesterfield said above, someone is under the delusion that they should link lots of stuff on the page in order to improve their search engine rankings. And, because of that, they thought the page might look less ugly if they toned down the coloring of links so that they're more to game Google than for end users.

I'd be curious to see some stats for the number of links per article for under-emphasized links versus articles where the links are clear. Obviously it wouldn't be 100% scientific, but it might lead to more clarity on the issue.

Answer 9

maybe this could be a nice soloution

a {
    font: inherit !imporant;
    text-decoration: inherit !imporant;
    color: inherit !imporant;
}