Add distinctive color to css a:visited on D.O

Confirmed. bluebeach did use a somewhat darker blue for visited links. I think that'd be worth bringing back.

Here's a first stab. I'm currently reproducing the behavior from bluecheese where the links get darker once you visit them. However, I've never understood this convention on the web. On a white background, the darker links "pop" more and seem to get more attention from your eyes. On sites that I'm designing, I usually reverse this, so that links are darker (more obvious) by default, and once you visit them, they lighten up so they blend more into the background.

Anyway, here's a few screenshots. Obviously it's pretty trivial to reverse which shade of blue is for visited...

Frontpage

Dashboard blocks

This is currently deployed on http://redesign.drupal.org if you want to play around with it there.

Thoughts?

wow. the visited color looks more better than the normal link color. it's more like tell me something highlighted than I visited that link.

I agree with darker getting more attention; +1 for reversing (lighter for visited links, darker for non-visited ones).

On another note, one of the more common tasks Contributors Work On Daily is on the issue queues, so it's really.. uhm... annoying that I keep clicking on issues I've already read. Perhaps we can even think about a different link color or styling for issue links.

Just chiming in that having a visual difference for visited/unvisited is a big plus and I consider it a usability guideline. I have found myself revisiting pages here unintentionally lately, so this is going to help.

Please, continue!

I thought I would mention, this would be really helpful while using the search function of this site. Since you can't split out results from just issues or just forums (hint), I usually spend 5-10 minutes trying to play Jeopardy with the search engine trying to get just the right question that puts the article I hope exists on the first page.

If the titles of the articles I have already read (that didn't help) were another color, I'd waste less time reading the article a second time. And hitting "back" which may cause the query to run again depending on how the cache is set up?

Agreed on separating the colors, and the clicked color should be less-saturated.

However, I do want to keep some of the current lightness. I think the darker blue makes pages look too dark. Both colors probably have to be changed to have enough contrast.

See http://drupal.org/node/1051644 for our current palette, which will have expanded swatches once Drupal.org's aggregated CSS is cleared. It is copied from the original, https://infrastructure.drupal.org/drupal.org-style-guide/colour.html and needs to evolve with the site.

Come on drupal! Just give as different color for visited links, cause this is frustrating! I use your search a lot, and I hate when I open some page 2 or more times, just cause I don;t know that I've opened it before. I don't care what color will you use, just use different one. It's been months since this issue is opened and you still haven't done anything.

I cleared my cache but still no difference for pages I have visited.

I use firebug in Mozilla and remove their color for links. But it is annoying to do it over and over.

I guess I could add a style to chrome\userContent.css for this. It will be comfortable there along with the font and other item overrides I've been putting in to make the new site more readable at least on Firefox.

http://drupal.org/node/949418

Short version of #8: we need to pick the colors. I think the darker blue is too dark. We need two colors, probably shades of blue, that look good. https://infrastructure.drupal.org/drupal.org-style-guide/colour.html might help.

Whilst this is decided, using Greasemonkey I just added this bit to the Dreditor GM script:

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}
// Add "Grey" color from https://infrastructure.drupal.org/drupal.org-style-guide/colour.html
addGlobalStyle('#page a:visited { color:#9d9d93; }');

Maybe this'll help some of you try out a color on a longer term.

I would like to ask that the colors be DIFFERENT. "Shades of blue" that are just ever so subtlely different does not meet the need. I need to quickly read the page and know which link I have been to. How about a green and a blue?

Subscribing. I think this is an important, if not critical, UX issue. It's very confusing to not be able to tell what you've already looked at.

Changing colors will not address accessibility. What's ultimately needed is a change in saturation -- whether color changes or not. The "normal" blue has a rather dark character, so for colorblind people the visited style probably should be lighter … and for the rest of us also perhaps less blue, more gray.

This is definitely a usability issue and a black eye for Drupal. I think that the color of visited links is irrelevant so long as it's noticeably different than unvisited links. Why not just use the default purple that everyone recognizes?

I closed this as a duplicate #953664: CSS issue - a:visited color on Search Results .

Please...

Just giving this issue a better title. Also, closed #1344178: Add distictive color to css a:visited on D.O as a duplicate; this still is needed.

I think the visited link needs to be less noticeable (so but still needs to work on the gray background of the sidebar, or we have a separate visited link color for the sidebar) than the not-visited, so the links they haven't seen stand out more.

This is where the Color style guide lives now. http://drupal.org/node/1051644 ... so if the color doesn't exist, we can add in our own. Whatever is decided, we need to reflect that decision here too!

If you aren't happy with the styling (of any site, really) I suggest trying the Stylebot extension. I use it in Chrome. It let me add a:visited styling for drupal.org in a matter of seconds.

I just add this line in my style.css

.node a:visited {color:#333}

I didn't deal with this as there wasn't enough context - .node a:visited {color:#333}

I built on the patch and updated it for D7. I extended it a but but didn't change the colors.

This is a trivial issue, let's fix it.

css changes should not be made directly, they must be made to .scss files in the sass directory and compiled. See https://drupal.org/node/1953368.

Ok, here's another one.

sass/partials/common/_basic-elements.scss: we no longer have colors hard-coded into scss files. For example, a uses $dark-blue. I tried out the darken function; it isn't the same as the patch in #26, only as close as I could get it. We can adjust more as needed.

sass/partials/common/_navigation.scss: I couldn't see the change when I was testing. And I'm not sure we want navigation elements to have visited link colors.

sass/partials/common/_taxonomy.scss: the visited and non-visited styles looked completely different. Was this intentional?

sass/partials/drupalorg/_front-tabs.scss: I couldn't see the change when I was testing. I don't think we want these to be colored differently when visited since these are JS tabs.

Now deployed what we have so far.

I am not so sure about this change. Having special styling for "visited" isn't really a thing anymore in todays web design. You only see it rarely on news sites and its hardly noticeable in the current design, with that not communicating its meaning.

This is a really annoying change in some situations where this is not useful, which is every situation apart from the one in the summary?

Here's my dashboard, which is alternating colours for loads of different links as I scan down the list, which is distracting, it also does this on all the issue queue pages.

Maybe this should be restricted to just the search results page? But then the visited state will still persistent across different searches, so it ends up being a little misleading?

This really reduces the visibility of 'new' links on issue queue pages. They are really hard to find with a quick scan now.

I found this issue while wanting to create my own. Visited links in body text are very hard to distinct as link.

Yhea, this changed should be rolled back.

Closed one more issue as a duplicate of this one #2319831: new viewed links colour is virtually indistinguishable from normal text. I agree with the recent comments, the current colour isn't helpful in many situations.

To reiterate what I said in my duplicate issue. Recently the colour of links has changed to be a bit darker, a bit closer to black. This change makes links virtually indistinguishable from normal text, and needs to be reversed or changed to something clearer.

Maybe you've got fantastic eyesight and can see the difference from 100 metres on a mobile device in full sunlight.

But for me, I can hardly see the difference, and the only way now I can really be sure a link is there (when the link is part of a paragraph of text; not when it is in a side box) is to really really stare at the screen or (easier), hover the mouse over the probable link to get the hover underline and a slightly lighter shade. There are many circumstances too where a clearer difference is required:

• imperfect eyesight
• poor screen quality
• screen proximity
• mobile
• non-perfect lighting

The new colour is much much worse than before. Please put it back as it was, or choose a colour which is better, not worse.

I don't think this is just an implementation problem (eg. picking a new colour). I think this definitely is a bad idea to do site wide. The search results page, maybe. The browser visited state remembers previous history and not just the current search, so it doesn't achieve the objective in the issue summary correctly.

I committed the revert of this, which will be deployed later today.

It sounds like there isn't a good path forward for this issue, so I'm marking it Closed (works as designed). As always, issues can be re-opened with a good plan.

Now deployed.

OK, I'll re-open it with a proposed plan.

All links: Add an underline. I'm not sure why this was ever removed, but it's bad for accessibility. Links that are styled as buttons or in menus don't necessarily need an underline, but links in the body of an article, search result or issue do. This addresses the "links aren't noticeable" issue when the visited link color is darker.

From the Web Content Accessibility Guidelines (WCAG 2.0) (emphasis added):

The intent of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color. Color is commonly used to indicate the different status of words that are part of a paragraph or other block of text or where special characters or graphics cannot be used to indicate which words have special status. For example, scattered words in text may be hypertext links that are marked as such by being printed in a different color. This technique describes a way to provide cues in addition to color so that users who may have difficulty perceiving color differences or have low vision can identify them.

Visited links in articles, search results, the body of issues, the Drupal Planet block and Drupal Planet article bodies: Change (back) to the darker blue that this issue first resulted in.

Visited links in other contexts -- issue queues, issue queue blocks, tags, help text, user names, project names: Remains unchanged, that is, the same blue as unvisited links.

So that's my proposal.

We could possibly adopt what we used in D8:

a {
    border-bottom: 1px dotted;
    text-decoration: none;
}
a:hover, a:active, a:focus, .link:hover, .link:active, .link:focus {
    border-bottom-style: solid;
    text-decoration: none;
}

Although perhaps it should be a new issue.

Yeah, I thought about opening a new issue, but in this case it seemed tied to the color change. I support the differentiation in coloring of visited links -- I find it really useful for the Drupal Planet block, for instance -- but I agree that without the underlining, it makes it way too hard to spot them in blocks of text. So given that my proposal for adding an underline was tied to changing the visited link color, I figured it was really a part of this issue.

I'd support doing border-bottom instead of underline.

More resources on why underlining links is important:

• Guidelines for Visualizing Links, from Jakob Neilsen. "Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines." (The exceptions are "navigation menus and other lists of links.")
• Type and Color, from Joe Clark's Building Accessible Websites. "It is not uncommon for designers to use stylesheets to remove underlining from text links in navbars but retain them in body copy. Unlike navbars, it is not the case that anything in body copy is a link; in body copy we definitely need differentiation. Sometimes links should be underlined and sometimes they shouldn’t. I’m not going to tell you which orthodoxy to adopt. You may even mix and match. You must nonetheless ensure that your typographic choices in totum are accessible to a person with colour-vision deficiency.
• Do Links Need Underlines?, from Jared Spool. "Many people who use the web for a long time start to become conditioned to look for underlines. If you watch them with an eye tracker, you can see their focus dart from underlined-text to underlined-text when they first see a page."

Jakob Nielsen also wrote about why you should change the color of visited links:

"Hypertext theory, the Web's history, and current design conventions all indicate the need to change the color of visited links. Further, empirical observations from user testing have identified several severe usability problems on sites that violate this convention."

"Even people who believe in usability sometimes question the need for changing link colors. I think this is because they don't pick up on the problems caused by unchanging links when they conduct their own user testing. Unfortunately, the symptoms of these problems are among the most difficult to detect when you observe users."

The whole article is quite thorough.

Here is an example showing the improved contrast now that the original blue has been put back:

The original (and restored) blue is much easier to read. Thank you for your quick response!

Text comes from https://www.drupal.org/drupal-8.0/faq

Right, I don't disagree about the improved contrast. My proposal from #41 with supporting evidence in #43 is to darken visited links in body content, but also to add an underline (to all links, not just visited links). I agree that un-underlined links with the darker text have poor contrast to regular text.

I don't think dww is working on this anymore (from 4 years ago!), so unassigning.