>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3080422. --> Reported by: [andrewmacpherson](https://www.drupal.org/user/265648) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Many links on Drupal.org fail WCAG success criterion 1.4.1 "Use of Color". You need color vision to distinguish links from surrounding text.</p> <ul> <li>People with a colour vision impairment may have considerable difficilty perceiving them.</li> <li>They are not distinguishable on devices which use an alternative color space (e.g. macOS greyscale, or tinted screen overlays). They may still be distinguishable with a<br> Windows high-contrast theme, if the person has color vision.</li> <li>They can also be difficult to pick out in adverse ambient lighting, such as reading near a window on a sunny day. </li> </ul> <p>The problem is most pronounced in prose: the body text of pages, issues, and comments.</p> <p>It is also somewhat problematic in other components. For example, in the issue metadata block, it isn't clear which items are links (tags, author) vs those which aren't (project, priority, component).</p> <h4>Background reading</h4> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/F73.html">F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision</a></li> <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/visual-audio-contrast-without-color.html">Understanding SC 1.4.1 Use of Color</a></li> <li><a href="http://adrianroselli.com/2016/06/on-link-underlines.html">On Link Underlines</a></li> <li>Note, WCAG technique <a href="https://www.w3.org/TR/WCAG20-TECHS/G183.html">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</a> is nowadays widely considered to be INSUFFICIENT to meet WCAG. There is a growing body of <a href="https://github.com/w3c/wcag/issues/201">accessibility specialists calling to remove technique G183 from WCAG</a>.</li> </ul> <p>Related issues for Drupal admin themes:</p> <ul> <li>Seven - <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-13"><a href="https://www.drupal.org/project/seven/issues/2958282" title="Status: Needs work">#2958282: Links inside surrounding text fail WCAG Use-of-Color</a></span></li> <li>Claro - <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/claro/issues/3079134" title="Status: Closed (fixed)">#3079134: Add underline on links by default</a></span></li> </ul> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Underline links, as the global default. </p> <p>This basically means reversing the baseline policy of the CSS. </p> <p>For links in components with an alternative affordance the underline can be removed as a exceptions to the global rule.</p> <p>This is a safer and more robust approach than removing the underline globally, then having to anticipate all the places where it needs to be restored. You'll never anticipate them all.</p> <ol> <li> Remove this global rule: <pre>a, a:visited, a:active {<br>&nbsp;&nbsp;&nbsp; text-decoration: none;<br>}</pre></li> <li>If there are cases of links which can safely have the underline removed (because there is some alternative affordance, e.g. primary tabs) then make these the exception to the global rule.</li> <li>TODO: which links can safely have the underline removed? These can be picked up case-by-case. Possibly as follow-ups.</li> </ol>