Underline text links in markdown
Problem
In order to satisfy WCAG 2.1 1.4.3 Contrast (Minimum) (Level AA) text links must a) have at least a 3:1 contrast ratio with surrounding text, and b) have a 4.5:1 contrast ratio against the background.
As it relates to using color alone as the differentiator, the available palette that satisfies the requirements is extremely limited, so there has to be another non-color indicator for these links.
Solution
Underline text links.
Underlines don’t have to simply use text-decoration: underline either. The following gif from this CodePen example explores a few different methods.
Here are examples using the default underline.
| Before | After |
|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
What user problem(s) does this solve?
- Highlights actionable items and references within issuable descriptions, discussions, and wikis.
- Allows links to stand out for users who may have trouble seeing them due to small text and/or low contrast. This isn’t always related to a visual deficiencies either. It can be from viewing the screen outside or with glare, or when the user has high-contrast mode on in their system.
- Satisfies WCAG 2.1 1.4.3 Contrast (Minimum) (Level AA) which moves the product closer to fuller compliance.
Out of scope
- Content and elements or components not created with markdown.
- Inline elements that already have different styles. For example, linked usernames or inline code blocks that contain links.
- Inline labels.
Current limitations
- The typography styles and typescales from Pajamas are not implemented into the product. Doing so will be a large undertaking so a possible solution would be to include this change in Pajamas, and separately address in the product’s current state.
Resources
- Link Contrast Checker
- WCAG 2.0 and Link Colors
- How to meet Contrast (Minimum)
- Underlines are Beautiful
Edited by Jeremy Elder