How to Change Color of Visited Links in Chrome, Firefox, Safari?

Today, I just want to share a few quick tutorials on how to adjust the color of visited links in different web browsers, so you can avoid clicking on web pages that have been browsed already.

This is helpful especially when you (or your friends and family) are color-blind. For those who are color-blind, it's hard to tell the difference between the colors of visited and unvisited web links if they are not set properly. This can make simple web browsing a frustrating experience.

The Fun Story Behind It

The other day my cousin dropped by my apartment and he was using my laptop to search something on Google. Several times, I heard him say, "Stupid me! Why am I visiting this page again?" So I told him:

  • ​Me: Hey Daniel, are you clicking page results you've already visited?
  • Daniel: Yep. I don't know why.
  • Me: The visited pages in Google results are marked as red, and those you haven’t visited are in blue, in case you don't know… (I just wanted to help)
  • Daniel: I think they look all the same to me.
  • Me: Really? (I thought he was joking)...Hey, those are different colors. One is light purple, the other is blue. Can you tell?
  • Daniel: Nope!

​Our conversation started to get a bit serious, as you may have guessed. Yep, my cousin is somewhat color-blind — more specifically, red color blind. I use Chrome, and after I changed the color of a visited link from red to green, he could immediately tell the difference.

Do You Have Color Blindness?

First off, you don't have to worry about it at all if you have it. Most of the time, color blindness is genetic and there is no treatment, according to MedlinePlus. Also, to make yourself feel better, "There is general agreement that worldwide 8% of men and 0.5% of women have a color vision deficiency." (Source)

To test whether you are color blind, the quickest way is to check out this Huffington Post article. It includes five images sourced from the Ishihara Color Test.

For more tests, you can visit this website: http://enchroma.com/test/instructions/. You'll be given 20 trial questions before you see your test result.

Click the blue "START TEST" to start:

​Most people will be told they have "Normal Color Vision":

​The Color Scheme in Search Engine Page Results

Note: By default, most search engines such as Google and Bing mark results you clicked through as purple and results unvisited as blue. Here are two examples:

This is what came up after I searched for "TechCrunch" on Google. Since I've visited the TechCrunch Wikipedia page before, it's now marked as light purple, while Facebook and YouTube are still blue.

​In Bing, I searched "SoftwareHow" and here’s what I saw. Twitter and Google+ pages are already visited, thus they are marked as purple as well, while the Pinterest link is still blue.

​Now let's get back to the topic. Here's how to change the color of visited links in different web browsers.

Google Chrome

Unfortunately for the Chrome browser, you'll have to add an extension to make it work. Here's a step-by-step tutorial:

New Update (April 2018):

It seems the Stylist extension is now outdated and NO longer usable. Thus I just removed the link to its extension page. So far, I haven't discovered an alternative yet. If you happen to find any good options, kindly leave a comment below or email me directly. Thanks! (It's now back!!)

Note: the screenshots below are taken from Chrome for macOS (Version 60.0.3112.101). If you're on a PC or using another Chrome version, the steps may be slightly different.

Step 1: Open Chrome, then install this extension called Stylist. Click on the blue "ADD TO CHROME" button.

Step 2: Confirm by clicking "Add extension". You'll see a notification indicating the plugin has been added to Chrome.

Step 3: Right-click on the Stylist extension icon, then select Options. Under the Styles tab, hit Add New Style.

Step 4: Now name the new style, check the "All site" option, copy and paste this piece of code (as shown below) in the box, and click Save.

A:visited { color: green ! important }

Note: The color of is this line is "green". Feel free to change it to another color or an RGB code (255, 0, 0 for example). You can find more colors and their codes here.

Important: checking "All site" may affect your user experience with other sites. For example, I noticed that after implementing the change, my Gmail tabs all showed as red. which looks absolutely odd. So I added this rule, which only allows the change to impact specific Google search results.

Step 5: Check if the new style has taken effect. In my case, yes — the color of the visited TechCrunch Wikipedia page is now changed to green (by default, it was red).

P.S. I am used to having the visited link color show up as light purple, so I adjusted it back. 🙂

Mozilla Firefox

Making the change in Firefox browser is even easier because unlike Chrome, you don't need to install any third-party extension. Follow the step-by-step guide below:

Note: In this tutorial, I use Firefox 54.0.1 for macOS. If you are using another version or are on a Windows PC, the paths and screenshots as shown below may not apply.

Step 1: Make sure the "Always use Private Browsing mode" option is deselected. Open Firefox Menu > Preferences > Privacy.

Under History > Firefox will:, select "Use custom settings for history". If you've checked "Always use private browsing mode", uncheck it. If it's deselected (by default), you are good. Go to Step 2.

Step 2: Now go to Content > Fonts & Colors > Colors.

In the "Colors" windows, change the color of "Visited Links:" to your desired one, select Always in the drop-down menu, and click the "OK" button to save your changes.

Step 3: That's it. To test if the setting change is effective, simply do a quick search on Google and see if the color of those visited results has changed. In my case, I set them as green, and it works.

Apple Safari

The process is quite similar to Chrome’s. You’ll need to install an extension called Stylish. Follow the tutorial below, where I also point out a trick that you need to take care to perform. Otherwise, it won't work as expected.

Note: I'm using Safari for macOS (Version 10.0). The screenshots shown below may be slightly different from what you see on your computer.

Step 1: Get the Stylish extension (visit the link) and install it to your Safari browser.

Step 2: Click the Stylish extension icon (located on the top of the toolbar), then select "Manage".

Step 3: In the new Stylish dashboard, go to Edit. Complete the four tasks as shown in this screenshot. The piece of CSS code is shown below.

A:visited { color: green ! important }

Again, the color in my example is green. You can change it whatever you like. Find more colors and their codes here or here.

Pay close attention when you set the rules. For example, I wanted to only change the color of visited links in Google.com. I choose "Domain" and type "google.com" under the CSS box. Note: DO NOT type "www.google.com" as it won't work. It took me some trials and error to figure this out.

Step 4: Test to see if the change has taken effect. In my case, it works.

Microsoft Edge

Unfortunately, for Windows 10 users I have yet to find a feasible solution to change the color of visited or unvisited links. I thought the Stylish extension would work with Edge, but I was wrong. However, it seems I am not alone, as you can see from this discussion that many people are demanding the feature.

I'll update this post if Edge adds this function or there is a third-party extension that does the job.

Over to You

I hope you found this article useful. Please let me know if you're unclear about any steps in the tutorials above. If you discover an easier method, you can email or comment to notify me.

P.S. This article took me around five hours to complete. The best way to show your appreciation is to share it or leave a comment below if you found it helpful. 🙂

  • JP
  • September 9, 2017
JP
 

I'm JP, the founder of this blog. I've been passionate about computer software ever since I had my first laptop in 2007. I currently use a Macbook Pro, a PC (HP Pavilion), an iPhone & iPad, and an Android phone. My goal is to provide you with useful software and how-to tips to solve tech related issues. Learn more about me.

Click Here to Leave a Comment Below 18 comments