Contrast Triangle

When we remove underlines from our HTML links, we need to make sure that everyone can tell what pieces of text are links.

The links must have sufficient contrast to background color to be readable, and they also must have sufficient contrast ratio to the text color to be noticeable.

Per WCAG20 Guideline 1.4 Distinguishable both the text and links must have a contrast ration of 4.5:1, or 3:1 if it’s large scale text, and respectively 7:1 and 4.5:1 for Level AAA conformance. This is old news, though.

We can use lightness difference ≥3:1 with surrounding text to make them a bit more distinguishable.

Contrast ratios in this color mode are:

  • Between links and background: 4.79
  • Between links and text: 3.00
  • Between text and background: 14.35

If you through the color modes here (top right corner), you’ll notice that links in “soft” would be fine without underlines, but we can’t say that about links in my other color modes.

I added underlines back to this site while writing this note 😅

See more