19

I find it very hard to distinguish links from normal text on Programmers Stack Exchange, especially visited links on wall-of-text posts. The colour scheme used is:

Background    #fafafa (there's a background image, that's mostly #fafafa)
Normal text   #333333
Normal Link   #B64D27
Visited Link  #7F3A21

An example of a wall of text post is this answer, one of mine. When proofreading I couldn't see the (visited) link to the Wikipedia article on the first paragraph -- actually thought I forgot to add it!

Is it just me, or is this problem likely to be shared by a significant number of users? I have no idea how to approach this from a user experience perspective, proper lingo and all, I'm looking for answers that reference established practices and / or studies that shed light on whether the colors should be revised. I'll present those findings on Programmers meta.

6
  • 1
    Try increasing your screen's contrast instead of brightness.
    – Izkata
    Nov 26, 2011 at 18:10
  • 3
    @PatrickMcElhaney Perfect! That was quite the heroic edit. And finally I'm convinced, it might have been a rant in disguise :) There was too much info in the original question, most of it unrelated to the core question. It was more of a "I have absolutely no idea how to approach this, so I'll just keep adding everything that comes to mind" type of question than a concious rant, but I can now see how Renesis felt there was some editorializing in there. Obviously a better question now, thanks.
    – user5595
    Dec 19, 2011 at 13:42
  • I agree, it's better now. I do think we'd benefit from the question establishing what is "enough" or asking how to find out what "enough" is. As Izkata suggests in an answer "enough" might have different meanings depending on purpose.
    – Nicole
    Dec 19, 2011 at 16:59
  • 1
    I ran the page through a colorblind filter and had trouble locating your answer because I was looking specifically for the Wikipedia link. (Note: Before testing this, make sure you've visited the Wikipedia link.) Dec 19, 2011 at 18:03
  • 1
    More on the bounty: Nielsen's column has some good tips, but it's 7.5 years old, a lot of it's common sense, it's not as specific or practical as it could be, the bullet-point style isn't pleasant to read, and it doesn't mention standards like WCAG or tools to measure contrast or simulate colorblindness. There's better information out there, even scattered around this site. It just hasn't been collected (AFAIK) in one concise summary. Dec 20, 2011 at 14:12

8 Answers 8

19
+100

There are no rules, at least no hard and fast ones. Following research to the letter can result in making an ugly site--blue links work best, but blue links on a red background are hard to read! The research however can guide you to the "best practices" and your maintain your sense of good aesthetics so you know when to break from convention.

While there are no rules, there are lots of guidelines; some outdated and some very good.

The Past

The old standby for link appearance is Nielson's Alertbox posts:
Visualizing Links and Change the Color of Visited Links

People get lost and move in circles when websites use the same link color for visited and new destinations. To reduce navigational confusion, select different colors for the two types of links.

These posts give a good basic summary, but they're quite old. The big thing to take away is that links should be a unique, consistently chosen color and visited links should be a clearly different and consistently chosen color. Don't put too much stock in the statistics however as the web has changed a lot in 7 short years. We'll get to current stats next.

The Present

Probably the single most important piece of research on links is a Google experiment showing blue links are clicked more. Non-blue links are clicked less, so one's color scheme should take this into account. Blue should be avoided for body copy due to this, as should underlining.

As for visited links, here's a great, up to date article on the state of visited links on the web by Kevin Simons; Where Have All the Visited Links Gone?

Simons notes that visited link color use has dropped sharply--I'd go so far as to say in 2004 most sites probably just never bothered to style their links, resulting in the default visited link color change. Simons points out the main use of visited links is to help a user keep track of where you've been:

Specifically, pay attention to the cognitive effort you have to expend on sites without a visited link color, just to keep track of where you’ve been. You’re sure to develop a renewed appreciation for the visited link.

Does the user need a reminder that they've already navigated to this link? If they don't, the link style probably shouldn't change at all. Note that for top level navigation elements a visited link color may be unnecessary and visually ugly (do I really need to visually SEE that I've never used the Contact Us section?).

For dynamic pages, a visited link color may be downright misleading; many web apps today have dropped the visited link convention as "visited" doesn't mean much in the context of an application or dynamic pages.

If you do need to make a distinction between visited and unvisited links, Contrast is King.

Contrast

As Leslie Jensen-Inman from A List Apart notes:

Using contrast effectively not only differentiates your design from others, it’s the essential ingredient that makes content accessible to every viewer.

The article goes into good detail of how contrast is important and how to use contrast effectively; I strongly suggest you give it a careful read.

They note that for accessibility reasons you should check your colors against common colorblindness simulators to make sure the contrast is suitible for colorblind users as well as non-colorblind users. Consider daltonizing your colors to see if they work better.

They also bring up CheckMyColors.com, a great site which will allow you to check the background/foreground contrast of all elements of your site at once.

Note that foreground/background contrast will not tell you whether two foreground bits of text have enough contrast! This is why you can't just use the Color Contrast Checker like some have suggested and call it a done deal.

Here's a great guide on Typographic Contrast which will help you put together all forms of contrast to make a nice flowing site.

Bottom line, contrast is great to differentiate things but it should be used appropriately. If there's really no reason to differentiate links that are visited and not visited, don't. If maximum contrast or standard link colors are too ugly with your current design, try something different.

Only real users can check if your links are distinct and functional.

1
  • So I'm pretty sure this is my longest answer on the whole SE network. Woohoo
    – Ben Brocka
    Dec 20, 2011 at 22:55
5

I'm pretty sure that this is an intentional part of the Stack Exchange UX.

Answers are supposed to be standalone, because external sites may go offline, or rename/take down the page linked to. If they primary content of the answer was a link to another site, then that answer is now useless.

The links are not underlined, so as not to distract from the answer, since they're supposed to only go to supplemental material. Similar reasoning exists for using colors that have less contrast to the text as opposed to the general web.

3
  • That's interesting, but it can only be confirmed by someone working for Stack Exchange Inc. But the link colours on SuperUser, DBA SE, ServerFault and UX SE have a lot more contrast from normal text than those on Programmers.
    – user5595
    Nov 26, 2011 at 18:17
  • @YannisRizos Hm.. Never really noticed, since I'm rarely on those ones. On SuperUser, at least, the non-visited color looks to have about the same contrast as non-visited on Programmers, but yeah, the visited color is the opposite
    – Izkata
    Nov 26, 2011 at 19:35
  • +1 for 'so as not to distract from the answer'. I'd say precisely the same, even if it may cause some anxiety and inconvenience to some users.
    – Kris
    Dec 20, 2011 at 11:22
4

WCAG provide guidelines for minimum colour contrast between foreground(text) and background. The normal link text above fails colour contrast requirements. I would recommend increasing the contrast.

Also be aware that too much contrast can cause some users issues (such as users with dyslexia). WCAG doesn't take this into account. There used to be a HP colour difference checker as well which had a slightly lower contrast threshold along with an upper limit.

I remember reading an article that claimed blue wasn't a good colour for distinguishing link text as with age the cones in the eye that register the blue hue deteriorate. Apologies that I cant provide a link!

Regarding whether others will suffer from the same issue you do, I don't have any figures to back it up, but imagine there may well be others who have similar issues.

Be consistent with your links throughout your site and always differentiate them from standard text. There are various ways to do this, all which have their own pro's and cons (such as underlining links etc).

Useful links:

http://www.webcredible.co.uk/user-friendly-resources/web-usability/effective-link-text.shtml

http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast

http://evolt.org/node/60472/

http://www.useit.com/alertbox/20040510.html

http://www.stcsig.org/usability/topics/colorblind.html

Colour contrast analyser online:

http://juicystudio.com/services/luminositycontrastratio.php

0
3

If you have difficulties distinguishing the visited links from the rest of the text, then there is a usability problem. You do not have to prove that there is a problem. Simply share your experience on the meta site.

Personally, i always underline links when embedded in text paragraphs. It is easier to spot them. Relying on colors only can be problematic due to different screen settings.

1
  • I also prefer underlining links, but that doesn't seem to be the case for Stack Exchange sites. Although there might not be a definitive proof that the colour scheme is problematic, I'd like to back up my claim with some sort of semi-scientific readability evaluation, something like minimum distance between text colour and link colour.
    – user5595
    Nov 22, 2011 at 8:20
3

The Colour Contrast Check is a great resource to test whether or not your colors are compliant with various standards. It provides as easy way to test for contrast.

3

I like Lebedev's stance on this (sorry for translated article). Basically it's like this:

  • Links have to be underlined;
  • Nothing except links can be underlined;
  • Nothing on the page can be of the same color as links (usually, blue, black or dark-gray);
  • It makes a lot of sense to highlight hovered link by changing its color or background;
  • Dashed underline can be used for links, that don't navigate user to another page (e.g., opening a calculator, more info etc.). Repeated click on such link should return page to previous state;

Checking if you did good is easy: if user can tell where the link is on your page without touching his/her mouse or keyboard - you did good.

1

Yes the link colour choice is pretty poor at Programmers Stack Exchange. Besides the low contrast and missing underlines the colour of visited links isn't very far from colour of unvisited links. That said in considered my opinion all Stack Exchange sites should have underlined links at least in the text body of questions and answers.

You can always use the classic Jakob Nielsen column Guidelines for Visualizing Links as reference.

2
  • A key point from Nielsen: "If you've opted to present links with less than the maximum perceived affordance for clickability, you can recover some of the lost usability by signaling clickability when the user hovers over the link. For example, if your links aren't underlined, you can make an underline appear while hovering." The site does add underlines on hover. Dec 19, 2011 at 17:48
  • Yes obviously you can recover somewhat doing that. However, you could just as well do it right in the first place.
    – Illotus
    Dec 25, 2011 at 10:35
1

I personally believe with Stack Exchange having this wide range of sub branches with sister sites, all with their own unique colour coding/fonts/icons/etc, some shortcuts when it comes to choosing colours are bound to happen. I wouldn't be surprised if a suitable colour for clicked links is neglected due to the fact that it's used in another sister site of Stack Exchange and that they want the look of this site to be distinguishable from other Stack Exchange sites.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.