## Problem In order to satisfy [WCAG 2.1 1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#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](https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/working-examples/G183/link-contrast.html), 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](https://codepen.io/lostsatellites/pen/zQLXvd) 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](https://webaim.org/resources/linkcontrastchecker/) - [WCAG 2.0 and Link Colors](https://webaim.org/blog/wcag-2-0-and-link-colors/) - [How to meet Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum) - [Underlines are Beautiful](https://adrianroselli.com/2019/01/underlines-are-beautiful.html) --- /cc @gitlab-com/gitlab-ux/ux-foundations @mikegreiling