Comment 8 for bug 1960526

Reopening this thread because the color contrast issue needs discussion apart from the acquisitions interface.

The proposed link color does pass level AAA checks on the main contrast checking tool, but doesn't pass the link contrast checker (https://webaim.org/resources/linkcontrastchecker/) because it lacks contrast with the body text color. Note that we need to test with #f7f7f7 as the background color, since this is used in tabs and tables. Level AAA compliance is complicated, and introduces problems for people who don't have low vision. I think we should consider a separate high-contrast mode that could be set in user preferences for those who need it, and stick to Level AA compliance otherwise.

I've put together a quick comparison of the link and button colors that are currently failing automated accessibility tests: https://codepen.io/stephanieleary/pen/poVaPYq

The second set shows the minimum change needed to pass the Level AA tests, and the third set shows the nearest Bootstrap 5 tints (https://getbootstrap.com/docs/5.0/customize/color/#all-colors). I would recommend the Bootstrap 5 colors even though they are ever so slightly darker, since sticking to the defined palette will help us stay consistent.

I also threw in a button using the Evergreen brand color in the second set, but I'm leaning against adopting that color for green/success because it's so similar to the cyan/info color. If we want to use the Evergreen shade for buttons, we'll need to consider choosing a different color for info.

If you agree on the Bootstrap 5 scheme, here's a patch: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/a11y_btn It does not include the optional text shadows; I plan to do a separate patch later to add subtle shadows to several parts of the interface where depth can be hard to perceive, like nav menus that drop down over dense text tables.