Let’s say you’re building a site, and you’re working with a designer. They come to you with some solid designs, and you’re ready to go. You’re also a conscientious front end developer and you like to make sure the sites you build are accessible. The designs you’re working from have some body copy, but you notice that the links inside the body copy are missing underlines.
You are now in The Contrast Triangle.
The “triangle” meaning a three-sided comparison:
- The contrast between the background and text
- The contrast between the background and links
- the contrast between text and links
I would think this matters whether you underline links or not, but I take the point that without underlines the problem is worse.
I’d also argue the problem is even more complicated. You’ve also got to consider the text when it is selected, and make sure everything has contrast when that is the case too. And the hover states, active states, visited states, and focus states. So it’s really like hexacontakaienneagon of contrast or something.
Long lines of underlined text are really hard to read! It’s an accessibility conundrum. It is also recommended that a link actually states what it is, ie: includes ‘click here’ or similar action in the text.
I’ve always been taught the opposite, that links should never say “click here” and should instead describe their contents. So instead of
To view the tutorial, <a>click here</a>.it should be
<a>View the tutorial</a>.Sorry for being four days late on this – but, thanks Chris for the shout out! The link to the tool itself is https://contrast-triangle.com/ – I hope it helps folks!