Why Your Links Need a Hover Effect

by on 10/07/15 at 4:15 pm

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.


Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns


Elegant Themes CSSIgniter

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

11 Responses to “Why Your Links Need a Hover Effect”

  1. Christophe

    Oct 8th, 2015

    Is there a particular reason why the link shouldn’t be always underlined or highlighted when using a mouse (not just on hover) ?

  2. Richard

    Oct 8th, 2015

    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! :)

  3. Muhammad Ahsan Idrisi

    Oct 8th, 2015

    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

  4. Terrance

    Oct 8th, 2015

    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.
    Terrance fullerton

  5. Deborah

    Oct 9th, 2015

    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.

    • MT

      Nov 3rd, 2015

      Thanks for your comment! I totally missed the :focus when considering :hover.

  6. Francis Kim

    Oct 10th, 2015

    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.

  7. Elizabeth Carpenter

    Oct 13th, 2015

    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.

  8. G F Mueden

    Nov 5th, 2015

    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.

  9. Dewi Jones

    Jan 14th, 2016

    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.

Leave a Comment