Links must be distinguishable from text

[VickieKarasic]

Steps to recreate

Currently, our pul-base.libguides.css defines links with the color #3d77c7, which gives it insufficient color contrast with the surrounding text (minimum contrast is 3:1 and ours is 2.8:1).

URL

You can view this on any LibGuide with links in the text, example: https://libguides.princeton.edu/c.php?g=1421312&p=10537371

Issues

• Link text must be at least 3:1 contrast with surrounding text
• Links must also have readable (discernible) link text (e.g. underline)

Severity

Serious
WCAG 2.1 Violations:

• WCAG 2.1 Level A: 1.4.1 Use of Color
• WCAG 2.1 Level A: 2.4.4 Link Purpose (In Context)

WCAG Success Criterion

• Changing link text to a color that passes the 3:1 ratio (https://www.w3.org/WAI/WCAG21/working-examples/link-contrast/)
• Underlining links

WCAG Conformance level (A, AA, AAA)

A

User impact

Serious

Recommended fix

• Changing link text to #0066CC as a color that meets 3:1 ratio with black
• Underlining link text to make it discernible from surrounding text

Acceptance criteria

• I can successfully use this feature with Voice Over in Safari.
• I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
  • axe dev tools
  • Lighthouse
  • Wave
• ...

Notes