Angular link color and link accessibility

[Galen Charlton]

The default Bootstrap blue used in the Angular interfaces, #007bff, fails WCAG color contrast guidelines against a white background. It is also problematic in the context of the upcoming work on the Angular line item manager, which uses background colors to express the status of each line item (supplementing text labels).

Following the example of bug 1746365, I propose that we add global styles to the Angular staff interface to set the default link color to #286090.

This would make it match the AngularJS interfaces, provide better contrast out of the box, and make it easier to get to at least WCAG AA on the LI interface.

Some testing I did suggests that #286090 is also easier to work with than the upcoming Bootstrap v5 default blue, #0d6efd.

Other consideration: per WCAG guidelines, color alone isn't enough to distinguish links. We should consider a global style to add underlines across the board.

Evergreen master

[Galen Charlton (gmc)]

Patch implementing the color change here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=commitdiff;h=99c7266a29edbafaa93504ea88466c7978260d82

Not putting a pull request on this yet, but I would appreciate testing.

[Erica Rohlfs (erohlfs)]

At the hesitation to admit something personal on here, I have vision issues in my left eye and I have been struggling to see/navigate around the new interfaces. However, I've heard feedback from other librarians that they like the blue, and it makes it clearer for them where to click.

[Galen Charlton (gmc)]

Noting that #255a88 might be a better choice, as that achieves WCAG AAA for normal text, which #286090 does not. In that case, the AngularJS side should be made to match as well.

[Galen Charlton (gmc)]

A patch that changes the color for both Angular and AngularJS is available at

user/gmcharlt/lp1960526_improve_link_contrast / https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/gmcharlt/lp1960526_improve_link_contrast

[Garry Collum (gcollum)]

Tested and verified with WebAIM. A signed off branch is at https://git.evergreen-ils.org/?p=working/Evergreen.git;a=commit;h=f761bdf98101f7fc0b0b95cdac478d7fa95d853b

[Andrea Neiman (aneiman)]

This patch is now included in the branch for bug 1942220

[Stephanie Leary (stephanieleary)]

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.

[Jeff Davis (jdavis-sitka)]

Should this bug still be considered a duplicate of bug 1942220 ?

[Stephanie Leary (stephanieleary)]

Moving the contrast discussion to bug 1991562, since 1942220 is now closed.