I have a website with a white background, but dark grey header.

I like to use #09F (light blue) for hyperlink text, but they look a lot different depending on whether the background is dark or light.

Do you change the hyperlink text colour depending on the background, or not?

This goes for all elements by the way, like buttons with background colours that look different.

  • 5
    I fail to see anyone answering 'no' for this, although many times it is the graphic designer role to sort these things out. The theory behind this will be much better explained to you by our friends at graphicdesign.stackexchange.com – Izhaki Sep 23 '13 at 18:56

Maybe you've heard or seen the Edward Adelson optical illusion checker board.enter image description here

enter image description here

The surrounding colors affect the level on contrast the human eye detects.

W3C has a list of tools to analyze the level of contrast between colors. They suggest a ratio of 4.5:1 between background and text colors. This is one of the contrast tools you can use to calculate the ratio and adjust your colors to find the right fit.

  • I love this illusion. With it you can explain so many things about how vision works. – Jessica Yang Oct 14 '13 at 4:35
  • @JessicaYang Feel free to expand on it. I'm sure an extra tidbit or two would be appreciated. – glilley Oct 17 '13 at 18:59
  • @cantsay Is the contrast ratio and tool not a sufficient answer for your question? I think the general consensus is no to changing text link color depending on background because of a couple of general principles: consistency, hierarchy, and predictability. – glilley Oct 17 '13 at 18:59

Yes, I do.

Whether or not a color is mathematically the same doesn't matter. What matters is that it looks the same. So if that's your objective, then you do need to account for the perception of the colors when placed against or next to different colors.

  • thanks, do you have any suggestions on how you can match the colours? obviously using a colour palette will match the colour codes – cantsay Sep 24 '13 at 14:51
  • 1
    @cantsay use your eyes! :) – DA01 Sep 24 '13 at 15:14

A well designed UI will eliminate the possibility for unknown combinations of foreground and background colours.

Consider this very site. The text at the top is light-on-dark but the text you are reading now is dark-on-light

When you design your colour scheme, adjacent colours will always be a consideration.



It's a matter of Colour Contrast and catering for all users actually being able see the hyperlinks properly. Not all users will have the same level of vision. If there is a poor contrast ratio, it may become an accessibility issue.

There are lots of tools that will let you check the forground colour against the background, but a website such as Check My Colours will generate a report over your site and may save you some time.

Depending if this is a new website, or an existing product with its own established brand, you may have a User Interface style guide that you can reference your design questions against. If not, it might be a good idea to make one so that the next time you (or the next designer to work on this) have a similar problem, you'll have a guide to follow.


I recently read a blog post about a company that was using LESS to handle this (text/background contrast ratio and pallette) dynamically; worth looking into if you value your sanity.

Your Answer

