If you’ve not seen it already, there is an online tool called VisCheck for approximating how a webpage will look to people with different forms of color blindness.

we as developers should use the guidelines as suggestions and not as rules

If you read my post about taking a pragmatic approach to validation you’ll know that’s a sentiment I share! Although unlike validation, in certain countries it is a legal requirement for websites to meet a minimum level of accessibility…

Truth be told, accessibility isn’t something I spend a whole lot of time thinking about, but I’m very pleased to see the topic get some airtime on this site.

I can always figure out a way to solve the contrast problem by using other techniques, including using those put forth by your article — very nicely done, I might add.

I was simply demonstrating that the guidelines aren’t always a solution to the problem and we as developers should use the guidelines as suggestions and not as rules. As such, your article, in addition in showing neat ways to do links, also demonstrates solutions for contrast issues with links.

Cheers,

tedd

If we look at WGAC 2.0 Levels 2 & 3, these guidelines also don’t specify that active/visited/hover links need to have differing contrast values, only that the luminosity contrast ratio between text/links and background color is at least 5:1.

But yeah, you’re going to have no luck coming up with 5 greys that are easily discernible from one another, and are darker than #585858. If it’s something you are concerned about (which it must be or you wouldn’t have mentioned it!) then perhaps using visual cues other than just the link color provides a solution.

For starters I would suggest that adding an underline solves the most significant issue – making links stand out from other text.

On hover you might remove the underline or change the link background color, for visited you might put a tick icon (or similar) next to the link. Regardless of contrast differences these indicators would still be apparent on a black and white monitor.

Interesting, but the guidelines you cited really don’t address links. For example, there are four states of a link, namely link, link-visited, link-hover, and link-click. How does one show the difference between text and those states of link on a black and white monitor?

You see, there is a limit to the amount of information that can be conveyed by contrast differences between five different states in shades of black. For example, on a white background standard text needs to be of at least a black shade of #585858 to meet the initial contrast requirement. If the text is #585858, then what shade of black would be sufficient to provide enough contrast to identify it as a link, as compared to text? And after that, what contrast is available to show a visited link, a link hover, and then a link-click? I think you will run out of shades of black before you solve them problem — am I wrong?

Thanks,

tedd

Guideline 2. Don’t rely on color alone.
2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/

One of the things that I find that is never discussed is contrast in links — does that matter?

In many sites that claim accessibility and even some of those who promote accessible tools, many of their links don’t pass the contrast measure.

Does contrast in links matter?

Cheers,

tedd