Increase color contrast on links and buttons in staff interface
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Fix Released
|
Medium
|
Unassigned |
Bug Description
Moving color contrast discussion from https:/
Several of Bootstrap 4's default colors don't pass WCAG level AA tests, including the primary blue (#007bff) used for both links and buttons throughout the staff interface.
The link color proposed in #1960526 does pass level AAA checks on the main contrast checking tool, but doesn't pass the link contrast checker (https:/
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 all four link and button colors that are currently failing automated accessibility tests: https:/
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:/
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 btn-info.
If you agree on the Bootstrap 5 scheme, here's a patch: https:/
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.
Changed in evergreen: | |
importance: | Undecided → Medium |
status: | New → Confirmed |
Changed in evergreen: | |
assignee: | Stephanie Leary (stephanieleary) → nobody |
Changed in evergreen: | |
milestone: | none → 3.next |
Changed in evergreen: | |
assignee: | nobody → Galen Charlton (gmc) |
milestone: | 3.next → 3.10.1 |
Changed in evergreen: | |
status: | Fix Committed → Fix Released |
Noting for anybody reading this that the Angular and ng-bootstrap upgrade proposed in bug 1982376 would force the issue of also upgrading to Bootstrap 5.