What (if any) guidelines exist about text/link colour difference?

Question

Are there any best practices or guidelines regarding contrast between link colour on a webpage, and the regular text?

I know there are contrast guidelines that refer to text vs background colour, but I'm also wondering if there are guidelines about the minimum colour difference that should exist between plain text, and link text.

For example, my background is white (FFF), my text colour is black (000) and my link colour is green (007C41)

Edit:

I realize it's up to personal preference to some degree. However, while my eyes may be able to tell the difference between #000000 and #000001 (they can't, but just for argument's sake), other's won't be able to. What I'm wondering is if there are any accessibility guidelines regarding what the minimum colour difference should be.

Answer 1

The only guidelines I was ever taught about links is this:

• Make it obvious that it is a link. Do not do anything that might trick a user to click on something they didn't want to click on.
• Make it obvious that it is different than the other texts on the page because you do not want your users to miss out on a link they might have wanted to click on.
• Years ago, I was taught that all links should be underlined. Obviously, many, including our beloved SO, do not do that. Many now favor that links are underlined only when hovered over.

Answer 2

• Basic guidelines from the US Department of Health & Human Services
• http://www.w3.org/TR/WCAG-TECHS/G183.html (courtesy of steveax)

Make sure you have a color blindness emulator plugin for your browser. Inability to distinguish variations in hue is a semi-common condition. What looks "different" to you might not be obvious with a certain type(s) of color blindness.

Once you've addressed color blindness, ensure that colors with popular meaning (red, yellow, green) are used in appropriate or neutral contexts. For example, a "Sign me up!" link probably shouldn't be red (danger, critical) unless it's very clear that it is part of a theme (e.g. all links are red). A "Delete" link probably should never be green.

It's worth being familiar with proper color compliments. Even if you have made a highly readable, usable site, people react differently to different colors. Some colors/color combinations simply "look" better than others, and often there is a simple mathematical reason.

Answer 3

There are a couple of guidelines that combine to cover that scenario:

• Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
• Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

A good article on webaim explains that:

So if you combine these two requirements, in order to be Level AA conformant, your page must have all of the following:

• 4.5:1 contrast between the non-link text color and the background.
• 4.5:1 contrast between the link text color and the background.
• 3:1 contrast between the link text color and the surrounding non-link text color.

In other words, your link color has to be significantly different from the background color AND the surrounding text color, which also has to be significantly different from the background colour.

Overall, the easiest thing is to use more than colour, e.g. an underline, outline, or bold text, in which case you only have to worry about contrast compared to the background, not the surrounding text.