8

I have read a lot about color contrast with regard to the text and background color (snook's tool), however is there a similar tool for validating the contrast of linked and non-linked text?

There is of course the debate about how to visually distinguish between link text and non-link text through the use of underlines, however, it is usually said that IF you choose to only use color to distinguish between links, then the contrast between the link and non link text should be great enough to ensure that your users can easily identify which is which.

Is there any kind of formula that evaluates this similar to the background?

edit: essentially i want to evaluate two foreground colors in addition to the background. So not only do the two foreground colors need sufficient contrast against the background to be readable, but they should provide sufficient contrast with each other to be distinguishable.

Improve this question
1
  • Good rule of thumb is to take blue for links, because of color blindness and the darkness of blue (high contrast). See Win OS, Apple OS or UXSE
    – FrankL
    Nov 14, 2012 at 12:02

5 Answers 5

Reset to default
2

Interesting question. I'm not aware of a tool that tests against both SC 1.4.1 (contrast between linked and non-linked text) and SC 1.4.3 and 1.4.6 (foreground and background contrast). That would certainly be useful!

You can however still use Snook's tool (or any other tool designed to check foreground/background contrast) to check link/non-link text contrast as long as it displays the contrast ratio.

EDIT: To clarify, in my own workflow, I test foreground and background contrast ratios to make sure they conform and then, if I need to rely on contrast between links (underline is always best) I test the contrast between linked and non-linked text. It can involve a little back and forth so I definitely understand how useful an integrated tool would be.

Improve this answer
1

There is a formula called the "Luminosity Contrast Ratio", which analyses link colour compared to background colour.

http://juicystudio.com/services/luminositycontrastratio.php

According to WCAG 2.0, you need to have a minimum ratio of 4.5:1. To give you an example, Black links (#000000) and White backgrounds (#FFFFFF) give a ratio of 21.00:1. The formula for working this out is on the link provided, with a handy calculator.

Improve this answer
4
  • 1
    sorry just read your edit, disregard that link I have posted unless you find it useful!
    – Matt Maclennan
    Nov 13, 2012 at 17:46
  • Definitely in agreement with this, but what about say blue links with black text on white background? What shade of blue is too close to black that it becomes difficult for the user to tell that the link text is a different color than the non-link text? edit: no worries!!
    – Charles Wesley
    Nov 13, 2012 at 17:46
  • 1
    I haven't seen any standards between linked and non-linked text. But what I do is make sure the 2 foreground colours in concern have 50% luminance between them (can check the value in Photoshop). You can also turn your website grayscale to check readability, this helps a lot in my opinion.
    – Matt Maclennan
    Nov 13, 2012 at 18:03
  • thanks, those are two great tips! I've tried grey scale but not checking luminance in photoshop, that's a great idea
    – Charles Wesley
    Nov 13, 2012 at 18:25
1

I don't know of an accessibility advocate that talks about link/nonlink contrast without additional visual cues. The W3 WAI recommends a 3:1 contrast ratio but this is with visual cues (underline).

There's no specific level of contrast or special color combinations that "work" without the visual cues. It just becomes a matter of the percentage of people that can't visually determine what's a link, and there's no simple formula for this because there are many different kinds of color blindness and different degrees of them.

Improve this answer
1
  • 1
    This is true, although the focus of that technique is on the default state relying on colour with an additional clue on hover and focus. Contrast must be tested on the default state first.
    – Matt Obee
    Nov 13, 2012 at 18:01
1

I have been doing some additional reading and it appears that the answer is that the link text needs to have a 3:1 contrast ratio to surrounding text.

So you can, for example, use the Juicy Luminosity Colour Contrast Ratio Analyser to measure the contrast of the link text and non-link text color to see if their contrast is greater than 3:1.

You can then use the contrast ratio analyzer to determine whether both colors ALSO contrast with the background enough.

G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

With this technique, a relative luminance (lightness) difference of 3:1 or greater with the text around it can be used if additional visual confirmation is available when a user points or tabs to the link. Visual highlights may, for example, take the form of underline, a change in font style such as bold or italics, or an increase in font size.

While using this technique is sufficient to meet this success criteria, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with black/white color blindness. If there are not a large number of links in the block of text, underlines are recommended for links.

The link below has an example of what this would look like to people with different types color blindness. They also give you 26 colors that work on both a pure white and a pure black background.

Any other color background, you would need to use the iterative testing idea I posted above.

Links with a 3:1 contrast ratio with surrounding text - These 26 web-safe colors pass at 3:1 vs black and 5:1 vs. white

As far as a tool goes, all one would need to do is to calculate the contrast ratio of link text to non-link text plus the contrast of both colors on a third background color and if all three pass the limits defined in the various resources on this page, then I think you'd have the magic box I was looking for.

Improve this answer
1
  • 1
    You might add an underline on hover for a little extra emphasis. Of course this won't help on touch UIs.
    – obelia
    Nov 14, 2012 at 4:14
0

Take a look at this tool: Accesskey Unfortunately you have to have the website online!

Improve this answer
2
  • That is similar to snook's where it evaluates contrast between foreground and background, but I want to evaluate two different foreground colors in addition to the background.
    – Charles Wesley
    Nov 13, 2012 at 17:41
  • Apparently, accesskeys.org has disappeared.
    – Tsundoku
    Oct 26, 2018 at 10:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.