Color contrast and intensity in the patron bills grids

Bug #2045292 reported by Stephanie Leary
14
This bug affects 3 people
Affects Status Importance Assigned to Milestone
Evergreen
Fix Released
Medium
Unassigned

Bug Description

While the Angular Circ screens have a less intense alert background color for the patron bills list (see bug 1904036), the AngularJS screens still use the older, very dark colors. Since red and orange are high-alert colors, we should reduce the intensity of these backgrounds in the grid rows (see https://www.tpgi.com/beyond-wcag-losing-spoons-online/).

Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Branch with revised colors for both the experimental Angular Circulation screens and the AngularJS ones:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP2045292-less-intense-billing-status-colors

To test, search for patrons who have overdues or fines (asterisks in the Concerto set: https://wiki.evergreen-ils.org/doku.php?id=qa:concerto_logins&s[]=concerto ).

In Angular, you should see muted pink or orange grid row backgrounds with a bolder 10-pixel border on the left side. In AngularJS, you should see the muted colors with a very thin border (these grids use very different padding) instead of the intense red and maroon rows.

Changed in evergreen:
assignee: Stephanie Leary (stephanieleary) → nobody
tags: added: pullrequest
Revision history for this message
Gina Monti (gmonti90) wrote :

I tried creating a signoff branch but still seeing the red in the overdue rows under Patron Summary in Angular Circ. I'm unsure if it's because of these lines in the pullrequest branch:

 .eg-grid-row-selected.overdue-row {
- background-color: #CF0000 !important;
+ background-color: rgba(var(--bs-red-rgb), 0.20) !important;
+ border-left: 2px solid var(--bs-red);
 }

Andrea Neiman (aneiman)
tags: added: needswork
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Thanks for reviewing, Gina! I think this is working as intended (although I've updated the branch to fix a padding issue on the selected rows). I'm attaching a screenshot of a patron with overdues in main today on the left vs. with this patch on the right. The Angular screens already had less intense backgrounds; they just had mismatched colors for links, icons, and selected rows. The AngularJS screens are the ones with totally different colors in this branch.

tags: removed: needswork
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

... the attachment would help, wouldn't it?

Revision history for this message
Stephanie Leary (stephanieleary) wrote :

We looked at this during today's code review meeting, and after discussion I've nudged the lost and long overdue backgrounds a little darker. New branch, freshly rebased: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP2045292-less-intense-billing-status-colors-v2

Revision history for this message
Andrea Neiman (aneiman) wrote :

Noting that this work is funded by King County Library System.

Changed in evergreen:
status: New → Confirmed
importance: Undecided → Medium
Revision history for this message
Jane Sandberg (sandbergja) wrote :

I am seeing the changes when I load the patch, and it is much more readable. Thanks, Stephanie, Andrea, Gina, and KCLS! I've pushed my signoff to user/sandbergja/LP2045292-less-intense-billing-status-colors-v2-signoff / https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sandbergja/LP2045292-less-intense-billing-status-colors-v2-signoff

tags: added: signedoff
Blake GH (bmagic)
Changed in evergreen:
assignee: nobody → Blake GH (bmagic)
Blake GH (bmagic)
Changed in evergreen:
status: Confirmed → Fix Committed
assignee: Blake GH (bmagic) → nobody
Andrea Neiman (aneiman)
Changed in evergreen:
milestone: none → 3.13-beta
Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.