web client: Link color does not provide adequate contrast

[Kathy Lussier]

While trying to improve the contrast of colors used for bug 1635386, it came to my attention that the default color we use for links in the web client does not provide adequate contrast to meet WCAG guidelines except in cases where we use a white background color.

This is not so much an issue on the bills screen, where we most likely we have to use a lighter link color in any case to provide adequate contrast for darker background colors, but it does become an issue where links are used in grid rows that are selected.

The link color is #337AB7. The background color for a selected row is #C9DDE1.

If you look at WebAIM's color contrast tool, you'll see this combination fails all tests for WCAG compliance with the exception of Level AA for large text. The font size for text in the grids is 14px, and therefore doesn't meet the criteria for being large text.

https://webaim.org/resources/contrastchecker/?fcolor=337AB7&bcolor=C9DDE1

I tried moving the slider for the light blue background color to get it light enough to provide adequate contrast, but I had to move it all the way to #FFFFFF to pass the contrast tests.

I recommend using #286090 for links, which provides enough contrast to comply with Level AA of WCAG when those rows are selected. It is also a color that's already used in the web client when hovering over buttons with the btn-primary class.

[Kathy Lussier (klussier)]

Working branch available at http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/kmlussier/lp1746365-change-default-staff-link-color

[Cesar V (cesardv)]

Good catch Kathy, Bootstrap do mention in their docs under accessibility that a lot of their default colors will lead to insufficient contrast as far as WCAG. (https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/getting-started/accessibility.md)

Anyhow, looks fine to me so here's a signoff branch:

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/cesardv/kmlussier_lp1746365-change-default-staff-link-color

[Galen Charlton (gmc)]

Pushed to master, rel_3_0, and rel_2_12. Thanks, Kathy and Cesar!

I do have a concern about contrast between the link and non-link colors in this context, but will open a separate bug.

[Galen Charlton (gmc)]

See bug 1756572.