UX Polemic: Differentiating Visited and Unvisited Links

Today's blog post discusses a user experience design challenge we came across while building our company’s static website from scratch. Let’s look into the pros, cons, and limitations around the decision process on how to distinguish various types of links.

We always aim to provide a strong user experience while fulfilling accessibility and usability standards to create intuitive and easy-to-use apps. As you might notice, we distinguish the following types of links using Unicode characters:

• external links,
• internal links and
• email links bagr@trustica.cz.

This feature helps users understand what to expect when clicking a link. All links also open in the same tab, as we leave it up to the user to decide whether they want to open a new one.

The visited and unvisited dilema

A more interesting problem came with distinguishing visited and unvisited links. The old web standard typically colors unvisited links blue and visited ones purple. However, those colors didn’t really match our visual identity, which is based on orange shades.

Therefore we kept looking for clearer ways to differentiate visited links. One potentially viable idea was using outlined characters like ⬀ for visited links. Interestingly, during a small internal survey, we found that we each perceived differently whether outlined version of the arrow ⬀ should mean visited or unvisited. One interpretation suggested that the outlined arrow ⬀ symbolizes an unvisited link, based on the metaphor of coloring books, where an empty field is untouched. The second interpretation was exactly the opposite — unvisited links should use a filled arrow ⬈, because the information hasn't been consumed yet. But in the end, it didn’t matter, because CSS doesn’t allow the use of the ::after pseudo-element with property content on :visited selector.

The reason is privacy and security risk, websites shouldn’t be able to detect your browsing history. The :visited selector only allows the following CSS properties: color, background-color, border-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color.

We also wanted to avoid arbitrary or unfamiliar solutions that users wouldn’t easily understand, so we were left with color changes as our only option.

Changing the color of our orange links turned out to be the tricky part — especially on a white background. A key requirement was to meet at least the WCAG AA standard for color contrast. Unfortunately, orange shades could only be darkened, and they eventually ended up looking too brown — which didn’t fit the website’s color theme. We also did a small accessibility test with color blind users and found out that color differentiation was not visible for them.

After reviewing UX evidence-based research on the topic, such as Change the Color of Visited Links, and doing a small review of how other blogs handle this, we ultimately decided to relinquish this feature for now. Still, this topic remains a compromise — and potentially a future challenge to solve in a more suitable way.

What’s your take on this? Do you appreciate when websites and apps distinguish visited links, or do you find it an obsolete and unnecessary feature?

Thanks for reading — see ya next time!