Increase color contrast on badges in staff interface
Bug #1999282 reported by
Stephanie Leary
This bug affects 1 person
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Fix Released
|
Medium
|
Unassigned |
Bug Description
Three of the Bootstrap badge styles we use most often (primary, success, and info) don't pass color contrast checks.
Branch forthcoming.
tags: | added: pullrequest |
Changed in evergreen: | |
importance: | Undecided → Medium |
Changed in evergreen: | |
status: | Fix Committed → Fix Released |
To post a comment you must log in.
https:/ /git.evergreen- ils.org/ ?p=working/ Evergreen. git;a=shortlog; h=refs/ heads/user/ sleary/ 1999282- not-so- loud-badges
Branch includes new styles that flip the contrast on badges to make them less intense and comply with color contrast requirements. In keeping with the less intense alert styles, the badges have more subtle background colors. I have also adjusted the spacing and font weight to make the characters larger without greatly increasing the overall size of the badge.
All of these styles pass WCAG AAA contrast checks. In anticipation of Bootstrap 5, I have included the new .text-bg-* classes alongside the current ones.
The access key modal (Control-H) is a good place to observe the overall effect.