48

(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 | |
  • 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 meta.stackexchange.com/questions/33617/… and meta.stackexchange.com/questions/25657/… for general cases and meta.stackexchange.com/questions/24305/… for links in code formatting. – Grace Note♦ Jun 8 '10 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 '10 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 '10 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 '10 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 '10 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 '10 at 7:33
  • +1 for making it more visible – fl00r Apr 25 '11 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 '11 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 '11 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 '11 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 '12 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 '13 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 '13 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 '16 at 18:04
  • Related: Add setting to change default link colors. – user289905 Aug 29 at 3:50
18

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 | |
  • 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 '12 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](stackoverflow.com/questions/9598249/xcode-4-2-ode-signing-error/…) 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 '12 at 9:17
0

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:

http://colormine.org/delta-e-calculator

Compare to the HTML standard #0000ee and #551A8B:

https://html.spec.whatwg.org/multipage/rendering.html

which is a 50% difference in color.

| improve this answer | |

You must log in to answer this question.

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