The thing I dislike about hyperlinks is that making each state distinct enough while still fitting into a larger authorial voice for a website while also keeping them accessible is annoying.
Impossible? No, hardly. Just annoying.
Also there seems to be some weirdest about how you order the styles in CSS that messes thing up. And I’m **not bitter* that I can’t get it to work consistently here…
In order to have links maintain accessibility, you have to distinguish the unvisited from the visited state by more than just color (WCAG 1.4.1 Use of Color). So the typical design case to just change the color for visited link, which mirrors the original HTML defaults, isn’t accessible.
In order to make them distinct without color vision, you have to use some other indication to differentiate. The easiest way to do that is changing the font styling. Italics or bolding or maybe small if you’re cool with adding other accessibility problems?
Reusing emphasis or string to make your visited links differentiated is accessible but, as a person who writes a lot, it changes how the words read on the page. You’re either diminishing the effect of styling elsewhere in the text and/or making the links more distinct potentially to the detriment of the text itself.
No, of course not. So much of the internet is about information more than editorial now that using styling it change tone, suggest intonation, or some other vocal affect doesn’t really make that much difference?
Well, because font styling is better these days. Pretty much everything supports variable fonts allowing for far more customization of presentation for folks to use.
I’d propose that the better way to differentiate link state while preserving authorial voice as well as keeping links accessible is to change the font weight between link states.
Here’s a simulated simple example using Roboto from Google Fonts. You don’t actually need to click these but the last two are examples of reduced weight to show the potential differences.
I presenting these with scoped styling and force black background to avoid dark styling weirdness.
So personally, I really like the 3rd example which takes the weight from 700 to 200. It’s probably not distinct enough, font depending, but a really good place to start. Also, it doesn’t change the way I hear the text in my own head when reading.
It also gives you the ability to keep colors more consistent across state. These all use the standard purple color but there’s no reason you couldn’t change that. You can even keep the underlining that so often gets removed from any links (I’m def guilty of this….)
I think it meets the Use of Color requirements, especially if you do something with the underlining. Changing the weight makes the links visually distinct enough that you can tell the difference between states on a typical page.
I do think designers should include a color change ad adjustment to the text decoration. Which, after writing this, I’m going to implement better distinction for my link states for my personal blog. I think Bruta11y does a good job differentiating already.
Also need to look at a variable font option.
Published on April 12, 2025 – Design – CSS