Accessibility

Accessible underline requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG guidelines

Here are the WCAG 2.1 guidelines that apply to the AA level and are relevant to the design of underlines in hyperlinks.

1.4. Use of colour

Ensure that colour isn't the only visual means of conveying information. Underlines should be used to distinguish links from surrounding text so that colour isn't the sole indicator.

1.4.3 Contrast

The colour of the hyperlink text and its underline must have a contrast ratio of at least 4.5:1 with the surrounding text and background.

2.4.4 Link purpose

The purpose of each link should be clear from the link text alone. Underlines can be used to indicate that text has a function beyond plain text.

2.4.7 Focus visible

Ensure that the keyboard focus indicator is visible when hyperlinks are clicked and that the underline style matches the hover state.

1.4.8 Readable text (Level AAA)

Although this is Level AAA, considering it as a best practice is important. Be sure that underlines don't touch or overlap the text, which can make it harder to read.