Links contain text, but they should never look like text. When users read a web page, they need to be able to distinguish what’s clickable. If your links don’t have enough contrast, users could miss them.
Color is Not Enough for the Colorblind
Most sites make their links a different color from their text. But that’s not enough contrast for colorblind users. The difference in color is hard for them to see. Colorblind users have to rely on their cursor change (arrow to hand) as feedback.
A hover effect can give them a clear signal to see what’s clickable. When users move their cursor over a link, they’ll notice a change in color or shape that tells them to click. This prevents them from missing links.
Decreasing Mouse Cursor Focus
A lack of a hover effect not only affects colorblind users, but also normal users. Normal users will be able to see links better, but they still have to make an effort to target them.
When users see a link, they’ll move their mouse towards it. But they have to check if their cursor is on top of the link before they can click. Otherwise, they’ll end up misclicking the link.
With a hover effect, users can move their mouse towards the link and click as soon as they see the hover effect. This allows them to target and click links quicker without focusing on their cursor. Instead, their focus remains on the page content.
The Perfect Hover Effect
A low contrast hover effect is not as effective as a high contrast one because it’s not as noticeable. But there are things you can do to get the perfect hover effect. The perfect one will display a high level of color and shape contrast.
To add high color contrast color to your hover effect, you should vary the hue from a cooler to warmer color. For high shape contrast, you should underline or block highlight your links.
Hover Effects on Mobile
Hover effects won’t work on mobile devices because there’s no mouse cursor. This means that your mobile links need to have high color and shape contrast on them before the user taps.
You should style your mobile links as if the hover effect is already triggered. Use arrow affordances, underlines and block highlights to make them accessible to all users.
Final Thoughts
Whether your users are colorblind or not, everyone should be able to spot and target links with ease. Adding a hover effect to your links is a simple and effective way to meet their needs. Links and text shouldn’t just look different. For the best user experience, they should also behave different.
Book
Affiliate
Is there a particular reason why the link shouldn’t be always underlined or highlighted when using a mouse (not just on hover) ?
I have never thought about having a hover state as default on links while on mobile, but it does makes lot of sense from accessibility point of view. Will for sure implement from now on, thanks! 🙂
Came here to say this. Seems obvious now 🙂
I guess you are right, it is more related to feedback and discover-ability so user can easily find, aim and click or tap the link
Thanks for the tip.
You mention making sites easier to use by those with reduced vision capability then why not use a black or dark blue font color instead of grey.
Also in this comment form it is very hard to see exactly where the boxes are, maybe use thicker outline around them.
I have added my web site but it is still under construction.
I am making these comments as now that I have reduced vision these things become much more obvious.
Thanks
Terrance fullerton
Thank you for the excellent article and explanation on why links need a hover effect. When adding the hover effect, you can ensure mouse and keyboard users see the same effect by adding the same styling to :hover and :focus pseudo-classes.
Thanks for your comment! I totally missed the :focus when considering :hover.
All links definitely need a good hover effect, I agree. I think just the highlight and/or underline without the colour change is ok though.
Also note: for some users, a “hover” needs to happen when a link has focus, not just when the cursor is over it, i.e. when the control gets focus in the case of a user navigating a page via the keyboard.
It’s not just for color blindness. My low contrast sensitivity demands a high contrast display. In my Verizon webmail the print button is invisible, but having been told where it is, I can mouse for it and use it as the tag becomes visible.
Not so with Morningstar.com’s stock rating stars, invisible, black on my black background and they are not tagged.
On sites i develop, i add a subtle hover effect created using opacity by default, and for more important links i use different contrast color changes and sometimes block highlights, for call to action buttons i usually include animated icons. On mobile, i would like to add more CSS animation to CTA buttons, but CSS animations don’t work on mobiles as well as desktops.
I have a page I’m working on, its a very long scroll where most of the content is clickable to different pages, I don’t want to use the high contrast on desktop for its very difficult to read. As of right not I’m thinking of putting an arrow indicating its clickable and you can hover to get the contrast but how should I translate this to mobile? Is this article suggesting in mobile change the type color with underline?
Hover is a feature that allows users to access certain elements on a web page by hovering their mouse over it. This is helpful in finding information or clicking on links without having to scroll down the page. https://www.alakmalak.com/?UTM-andrew-aug/ has helped me multiple times over the years to design my website and can do the same for you for.