For my colorblind friends: how to change Chrome’s links into colors you can actually see.

I don’t normally ask for shares, but think about sharing this one. A lot of people could find it helpful.

And I mean a lot. As one of the 10.5 million people in the US and eight hundred million in the world who have red/green colorblindness, I’m here to tell you that Google Chrome’s blue/purple color scheme for visited/unvisited links is the worst design flaw on the internet.

People like me can’t see the difference between the two frigging colors.

Let me show you. Here are the link colors people with normal color vision (apparently) see:

And here are the link colors people with red/green colorblindness see (depending on the severity of their condition.)1

Oddly enough, though, the forest green URLs look…well…forest green. That may sound strange to you if you have normal color vision, but please understand that to red/green colorblind people the two colors don’t just disappear. We can often see primary reds and greens quite well; the problem is that subtle variations of them are difficult to differentiate. Hence why purple and blue are so frustrating…the red drops out of the purple.

So if not for the “You’ve visited this page…” text Google puts under visited links, it’d be a lot more difficult for people like me to tell the difference between where we’re going and where we’ve been.2

OK, my red/green colorblind brethren & sistren: it’s Stylist to the rescue.

Stylist is a free Chrome extension that allows customization of Chrome’s appearance. Developers use it to make skins. With just a bit of easy coding in Stylist you can change Chrome’s current link color scheme into one that’s much more colorblind-friendly. Like so:

Orange I’ve visited; cornflower blue I haven’t. My wife says the colors clash, but isn’t the whole point to make them stand out from each other? Aesthetics aside, the combination works because the two colors are high-contrast and stand out from white and are easy to distinguish from black.

So follow this procedure if you’d like to adjust the colors of your links in Chrome.

  1. Open Chrome
  2. Add the Stylist extension from here.
  3. Look at the rightmost icon in your extension row (on the same line as your URL box.) You should now see a greyed-out square with a diagonal line through it. That’s Stylist.
  4. Right-click on the square to reveal Stylist’s context menu. Choose “Options.”
  5. In the resulting box do the following:
    1. Click the “Add New Style” button.
    2. Name the style in the black bar across the top. As you can see in the image below I’ve named mine “Change Google Link Colors.”
    3. Next to “style set” click “All site”
    4. Copy and past the following code into the main box and click “save”:

.mblink:visited, a:visited {color: orange !Important;}

.mblink:link, a:link {color: cornflowerblue !Important;}

You should end up with this:

Now when you return to your main Chrome window you should see the Stylist icon in color, which means it’s up and running. To double-check, perform a Google search and click on any link and hit “back” so you’re once again at your search results. You should have an orange link for that site, and cornflower blue for the others.

But fortunately you’re not constrained to orange and cornflower blue. You can replace the color names in that code with any HTML-supported color name. Here’s a list.

To demonstrate: in the next example I’ve changed the colors from orange and cornflower blue to forest green and slate blue by changing the colors’ names from “orange” and “cornflowerblue” to “forestgreen” and “slateblue” in the code.

My wife says these two colors are a much better combination. So the great thing about this procedure is that a colorblind person and a “normal” person  can study the color list together and cooperate to find a combination that works for BOTH of them.

To wrap up: if you’re red/green colorblind I hope this post helps you. And if you have normal color vision, I hope you understand a little more about what people like us deal with on a daily basis.

Peace out.

Note that I’ve tested this process on my MacBook Pro several times, but if you should find that it doesn’t work for you, please email me IMMEDIATELY at EarlyRetirementDude.com so I can figure out and fix the problem.

Footnotes

  1. The shade of blue in this example is just a smidge darker than in the image above, but it’s the best I could do for a simulation.
  2. I’ve played around with extensions like Color Enhancer, but they just don’t get me there.

Author: ER Dude

Sick of your job? After a thirteen-year career, Early Retirement Dude fled corporate America for good. You can do it too! Visit http://EarlyRetirementDude.com or email EarlyRetirementDude@gmail.com.

3 thoughts

  1. At work, we have a document describing how we need to ensure any new software we create is ADA (Americans with Disabilities Act) compliant, including accommodations for red/green colorblindness. Surprisingly, the author chose to use red and green fonts to highlight certain text in that document.

      1. In our case, a good idea was poorly executed so I’ll just encourage you to search on “Color Blindness and Web Accessibility”.

Leave a Reply

Your email address will not be published. Required fields are marked *

Rockstar Finance

Important Disclaimers