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.

Toolkits