web client: Link color does not provide adequate contrast

Bug #1746365 reported by Kathy Lussier
8
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Medium
Unassigned
2.12
Medium
Unassigned

Bug Description

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)
summary: - web client: Link colors do not provide adequate contrast
+ web client: Link color does not provide adequate contrast
Revision history for this message
Kathy Lussier (klussier) wrote :
tags: added: pullrequest
Changed in evergreen:
importance: Undecided → Medium
milestone: none → 3.0.4
Changed in evergreen:
milestone: 3.0.4 → 3.05
Revision history for this message
Cesar V (cesardv) wrote :

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

Cesar V (cesardv)
tags: added: signedoff
Revision history for this message
Galen Charlton (gmc) wrote :

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.

Changed in evergreen:
status: New → Fix Committed
Revision history for this message
Galen Charlton (gmc) wrote :
Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers