Hovered text drops too far in contrast to be easily legible.

kevinreiss commented 2 weeks ago

Steps to recreate

Visit any search result page, i.e. https://allsearch.princeton.edu/?q=dogs.

User impact

Low vision users are challenged to use the site.

Severity

Medium per John Jameson.

WCAG Conformance level (A, AA, AAA)

Visual distinctions used to identify elements and states (e.g., a link's underline, its hover color and focus outline) each have a contrast ratio of at least 3:1 against their background and alternate states. (1.4.11 AA)

Example

Recommended fix

John's note: Orange is OK as a graphical element, so in theory you could just change the underline and icon color to orange and keep the text black.

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

maxkadel commented 6 days ago

We started looking at this as part of the work of #344

christinach commented 6 days ago

Closing in favor of https://github.com/pulibrary/allsearch_frontend/issues/344

pulibrary / allsearch_frontend