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:
- Between links and text:
- Between text and background:
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
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
… 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.