The Contrast Triangle

Removing underlines from links in HTML text presents an accessibility challenge. In order for a design to be considered accessible, there is now a three-sided design contraint - or what I call "The Contrast Triangle". Your text, links and background colors must now all have sufficient contrast from each other. Links must have a contrast ratio of 3:1 from their surrounding text. This is so that colorblind users can tell what pieces of text are links. By not using underlines, a design has to rely on contrast alone to achieve this. Even the default blue link color in browsers doesn't meet this contrast level. Both the text and links have to have a contrast ratio of 4.5:1, or 3:1 if it's large scale text.

Show underlines:

Background:Text

14.81:1

  • Text : Background contrast is 14.81(Needed: 3 for large text, 4.5 for normal)
  • Link : Background contrast is 4.55(Needed: 3 for large text, 4.5 for normal)
  • Text : Link contrast is 3.26(Needed: 3 if underlines are absent)