Accessible links

Introduction

One problem we see more and more often is the fact that many designers remove underlining from links for aesthetic reasons. This usually implies that the "link" can only be recognized through color and that, therefore, users with visual problems such as color blindness may have serious problems identifying them in the middle of a text. An example of an incorrect link would be:

Here we have an incorrect link

Use of underlining: the best option 

But what do the WCAG rules say on the subject? First of all, the rules emphasize that the most accessible option, shared by all users and recommended is underlining. The simplest option is the default CSS underline itself:

text-decoration: underline;
but we have many other options if, by design, we want a more subtle or less aggressive underlining.

An interesting option is that made by Wired Magazine which introduces a soft and thick underline using a softer colored border bottom:

a {
text-decoration: none;
border-bottom: 3px solid # b4e7f8;
}
or, if not, the same could also be done by simply changing the color of the underline itself (although some older browsers do not support the property and the "normal" underline would look):

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: # 8cc8ff;

// or the compressed version:
  text-decoration: solid underline # 8cc8ff;

With the result:

Another option is the shading property of Outside Magazine which also makes for an interesting effect:

a {
text-decoration: none;
box-shadow: inset 0 -3px 0 -1px # ffd204;
}
Result:

Alternatives to underlining

Still, though, there are designs (or designers) that don’t want to incorporate underlining in any of the ways. How can we not, therefore, mark the links in the middle of the text without skipping the techniqueG182: Ensuring that additional visual cues are available when text color differences are used to convey information i, en general, el criteri 1.4.1 Use of Color? We have several options that go to indicate the link with other visual clues extra to the color: modify the text of the link so that it is in bold, put it in italics or, directly, modify the font of the link. Be careful with the first 2 options as the link may be confused with "normal" bold / italic text.

What if, in spite of everything, the designer (or designer) does not accept it? Well thanks to

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 we have one last option: use brightness.

Luminosity is a property that we often confuse with color but which is actually different. For example, red and pink are the same color with different luminosities. Therefore, a person with problems distinguishing colors can see the difference between a pink and a red thanks to their difference in brightness. Applied to the case of links, the rule tells us that it is correct not to mark the link with any visual clue if the text of the link has a contrast of 3: 1 with respect to the text "normal" and, in addition, we add another of the visual clues when the link receives the hover or focus.

Conclusion

Therefore, to summarize. In order to distinguish the links located in the middle of the text the best option is always the underline with the different style variants we have seen.

In cases where, due to design limitations, we are unable to do so, we have alternatives that are:

• put the link in bold
• put the link in italics
• put the link in another font
• put the link in another color that has a contrast of at least 3: 1 with respect to the rest of the text and add one of the above visual clues when the link receives focus or hover

In the latter case it is necessary to remember that both colors (the one of the normal text and the one of the link) will have to fulfill the contrast 4.5: 1 that marks the criterion1.4.3 Contrast (Minimum) for double-A or 7: 1 level of the 1.4.6 Contrast (Enhanced) for triple-A level.