54

(This is mainly for Stack Overflow, I did personally not check out color schemes on the other sites. But a similar issue has been raised for beta sites.)

I don't think the current style for visited links on Stack Overflow posts is very nice. The text is black and links are #4A6B82 which looks almost like black or a very dark grey on my screen. That's not very accessible (and that's in spite of my good eyesight).

Additionally, links in inline code sections do not get underlined on hover, which makes them even harder to spot. Sometimes I link to documentation by putting a link on ClassName(<- like this), and it is very hard to notice that it is even there (apparently, Meta has the same problem…).

I would find brighter links and consistent underlining very helpful.

I'll tag this as [bug] because I think link coloring is actually broken. And the other choices ([feature-request] [discussion] [support]) don't really fit.

Improve this question
15
  • 1
    There was another post about this, I'm certain, and it did state this to be a problem on Server Fault and Super User. But besides that we have Make links in Stack Overflow answers more obvious? and Can we make hyperlinks more obvious in an SO answer? for general cases and Make links formatted as code more prominent for links in code formatting.
    – Grace Note StaffMod
    Jun 8, 2010 at 17:27
  • @ccomet: Nice, two times "declined" without explanation. I can see where this is going (even though I still hope it won't).
    – Tomalak
    Jun 8, 2010 at 17:31
  • +1. I don't have a problem with the colour of visited links, they're easily distinguishable from non-visited ones whilst sticking to the colour scheme (like a dimmed out link, which is a popular style for visited links). I do think the code blocks deserve an underlining on hover to keep consistency, though.
    – Andy E
    Jun 8, 2010 at 17:43
  • 3
    @Andy: I don't have a problem with the color of the visited links in comparison to new links (that's perfectly fine), I have a problem of their color in comparison to plain old text (that's hard to separate).
    – Tomalak
    Jun 8, 2010 at 17:46
  • @Tomalak: visited links look much lighter than black on my screen, I can even easily distinguish them when I'm looking at a large block of text. They're definitely not "almost like black" or "very dark grey", in Paint (lol) its luminance value is 96 out of 240 which is exactly 40%. Maybe it's a contrast ratio thing?
    – Andy E
    Jun 8, 2010 at 18:03
  • @Andy: I've uploaded a screenshot: img85.imageshack.us/img85/4811/visitedlink.png (original size and 300%) - judge for yourself. I find it's pretty close, and I have the same problem on my regular PC (which is color-calibrated) as well as on my laptop (wich is not). Maybe it is related to choice or size of font, anti-aliasing, viewing angle - but it should be unambiguous regardless.
    – Tomalak
    Jun 9, 2010 at 7:33
  • +1 for making it more visible
    – fl00r
    Apr 25, 2011 at 8:45
  • 1
    quote: Just underline it with light dotted line so it won't add any noise but it will 10x more recognizable
    – fl00r
    Apr 25, 2011 at 8:46
  • 1
    +1, it has my vote. I included a link in a comment I've just made, and it's clear from the response of the user that he skipped the link (and I've done it many times before as well.. but always blamed my skipped-appointments-to-the-opticians-for-the-last-two-years).
    – Matt
    Sep 8, 2011 at 13:19
  • 1
    @Matt: It's definitely hard to see. People who say otherwise are biased because they know what to look for. Hell, I know what to look for and occasionally catch myself hovering over a word just to double-check.
    – Tomalak
    Sep 8, 2011 at 14:17
  • I'd +1 if I had the privilege. This has tripped me up twice in the last two days. In one example, commenter said that he tried the code and it worked for him. the code was a link and he was referring to my jsFiddle. But I didn't notice the link and thought he was referring to my code pasted into the question. The problem was that the jsFiddle and pasted code actually worked slightly differently because one was in body and one was in head. I had to ask for clarification and only later realized that it was a link.
    – toxalot
    Dec 1, 2012 at 21:25
  • 3
    +1, I just told someone to add a link to the documentation... although, he's already done that. I just didn't see it at first, neither did he see mine... stackoverflow.com/a/15246764/460368
    – Shikiryu
    Mar 6, 2013 at 15:15
  • +1 I had the same problem and I was about to post a new question. I totally miss links.
    – BrunoLM
    Dec 23, 2013 at 20:35
  • 1
    I had a related problem on stackoverflow.com/… where I go down the list pogo-sticking in and out of answers and easily lose track of which I've visited because they all seem the same color.
    – Chris Nelson
    May 19, 2016 at 18:04
  • Related: Add setting to change default link colors.
    – Sebastian Simon
    Aug 29, 2020 at 3:50

2 Answers 2

Reset to default
21

I think the idea behind the a:visited color is that to make it blend into the text more. The user has already visited the link, so it doesn't need to stand out as much. Basically, the blue color is mixed together with the black to make it flow into the text more. While I understand the idea, I think it is a bad one. I like my links to still pop out at me no matter how many times I've visited them. Blending them into the text afterwards just makes it harder for me to find it again in the future.

See this nice chart of the current link colors (on the top) and a suggested alternate #05A for the visited link color, which would be noticeably darker, but still stand out from the black text next to it.

colors

Because I didn't feel like waiting for SE to implement this, I wrote some CSS rules of my own. This will catch all links inside the post text, any links inside the comment text, and also the questions lists. Just apply it to the stackoverflow.com domain and enjoy different visited link colors. I also changed the border for hover to a dotted border, and even accounted for links appearing inside inline code, to make them stand out. It doesn't include the links found below the posts (last edited and usernames).

.post-text a, .comment-copy a { border: 0; color: #07C; text-decoration: none !important }
.post-text a:hover, .post-text a:hover code, .comment-copy a:hover, .comment-copy a:hover code { border-bottom: 1px dotted #07C; color: #07C }
.post-text a:visited, .comment-copy a:visited, .question-hyperlink:visited { color: #05A }
.post-text a:visited:hover, .comment-copy a:visited:hover { border-bottom: 1px dotted #05A }

How this looks viewing the questions list:

Example of questions list

How the visited color looks around other text, not blending in so much:

Example of visited links inline with other text

How this makes inline code blocks stand out when they're linked:

Example of inline code linked

Improve this answer
3
  • 2
    Also, it might well be that a certain link has been visited, but not in the context of the question at hand. So yes, I've clicked on it, but not here.
    – Tomalak
    Jan 17, 2012 at 21:18
  • 2
    I take issue with the idea that just because the user has visited the link, it doesn't need to stand out. I just added a redundant answer to this question because I didn't see the link the asker had already provided in their question. The fact that I'd already visited the link doesn't make any difference in this situation, you'd expect people suggesting links to have visited them before.
    – Jim
    Mar 7, 2012 at 9:17
  • @Zombo I don't know what you're on about? I wasn't staff when I wrote this, and my answer here mainly focuses on the usability of moving a link towards grey-scale after a visit, which is definitively a bad move across all UX and we haven't used that method of coloring visited links in years. You seem to have interpreted my answer as being in support of it, which it is not. "While I understand the idea, I think it is a bad one."
    – animuson StaffMod
    Feb 9 at 22:14
2

I think the idea behind the a:visited color is that to make it blend into the text more. The user has already visited the link, so it doesn't need to stand out as much.

The traditional blue indicates that an item is a link, and the traditional purple indicates that an item is a link, AND has been visited. By making a visited link the same color, youre removing a users ability to recognize visited links. By making visited link a similar color, youre reducing a users ability to recognize visited links. I know for myself, I will often visit a link multiple times, so this is certainly a regression in behavior, for no benefit.

The color difference with visited links is unacceptably low, with regard to accessibility. This code:

[Sunday Monday](https://example.com)

creates this:

Sunday Monday

Which will normally be #4e82c2 or #3969a4 if visited. Thats only a 10% difference in color [1]. Compare to the HTML standard #0000ee and #551A8B [2], which is a 50% difference in color.

  1. https://colormine.org/delta-e-calculator
  2. https://html.spec.whatwg.org/multipage/rendering.html
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .