web client: Link color does not provide adequate contrast
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Fix Released
|
Medium
|
Unassigned | ||
2.12 |
Fix Released
|
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:/
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.
summary: |
- web client: Link colors do not provide adequate contrast + web client: Link color does not provide adequate contrast |
Changed in evergreen: | |
milestone: | 3.0.4 → 3.05 |
tags: | added: signedoff |
Changed in evergreen: | |
status: | Fix Committed → Fix Released |
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