Wishlist: Accessibility and re-evaluation of line item status colors in Acq

Bug #2017593 reported by Elizabeth Davis
24
This bug affects 4 people
Affects Status Importance Assigned to Milestone
Evergreen
Confirmed
Wishlist
Stephanie Leary

Bug Description

Currently, the line item colors in Acquisition associate to the current status of the item. They are as follows- https://docs.evergreen-ils.org/eg/docs/latest/acquisitions/selection_lists_po.html#line_item_colors.

Traditionally, colors in the red family are associated with a negative, so if you are new to Acquisitions this color coding is a little difficult to acclimate to. Conversely, the lighter colors can be difficult to see or distinguish between one another.

We’d like to propose a review of the colors for accessibility and adjusting the colors to have the red or pinks used for statuses like Canceled and Delayed.

Perhaps something like this:
                Using Current Colors Using New Colors
New White/No BackGround White
Selector Ready Light Yellow Light Yellow
Order Ready Light Olive Green Medium Yellow
Pending Order Light Gray Light Orange
On Order Medium Gray Medium Orange
Received Medium Blue Medium Blue
Delayed Light Pink Light Red
Cancelled Medium Pink Medium Red

description: updated
tags: added: accessibility acq-lineitem
tags: added: acq
Changed in evergreen:
status: New → Confirmed
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

I discussed the line item status colors recently with a friend who used to use Evergreen daily. She confirmed that with her type of red/green color blindness, the statuses were "a nightmare" to tell apart.

Pilestone's simulation tool matched her experience (or at least, she couldn't tell any difference between the actual screenshot and the simulation). This should be useful for testing new potential color schemes:
https://pilestone.com/pages/color-blindness-simulator-1

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

I have a branch here with my proposed line item colors. They include border styles to help color blind folks distinguish the different statuses. Varying the intensity of the colors as well as the border and font weight makes these easier to distinguish in my testing with emulators, but I'd appreciate feedback from those who have a lot of line item data with a good mix of statuses.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP2017593-line-item-status-colors

The revised color scheme is shown in the attached (although real line items are quite a bit taller, which changes the overall effect). Note that I have basically swapped Delayed and On Order, since (as Elizabeth noted above) it makes more sense to associate red with the status that indicates a problem.

The new colors are:
* New: pale yellow (same as before) with dotted dark yellow border
* Selector Ready: medium yellow with a dashed darker yellow border
* Order Ready: pale green with a dashed dark green border
* On Order: medium blue with a diagonal red-white-blue striped border (like an airmail envelope) and semi-bold title and author lines
* Pending Order: a lighter version of On Order, without the bold
* Received: white with a solid light gray border
* Delayed: pink with a heavy black border and very bold text for the title and author
* Canceled: white, no border, with grayed-out and italic text for the title and author

I would appreciate feedback on this!

tags: added: needsdiscussion pullrequest ux-colors
Revision history for this message
Tiffany Little (tslittle) wrote :

Hi Stephanie, I *love* the different borders! I think that's a great addition.

I have some feedback, and the only one I feel super strongly about is #1. I could be persuaded on the others since it basically comes down to "this feels right." :)

1. Received and Canceled should definitely not be the same color.

2. My brain thinks of Canceled as a red/pink color because it thinks "stop." Like, this has been stopped.

3. Order-Ready is going to only be used by those who use selection lists, which is a minority of sites. Pending-Order is going to be used by everyone because it's the status right before activation. So I think Pending-Order would be good as the green, as in "good to go".

Revision history for this message
Jennifer Pringle (jpringle-u) wrote :

I agree with Tiffany that Received and Cancelled shouldn't be the same colour.

Revision history for this message
Christine Morgan (cmorgan-z) wrote :

I agree with Tiffany that Pending-Order should be green. Not only does it indicate "good to go" but it is easier to quickly differentiate between line items that are Pending-Order and ones that are On-Order.

I also agree that Received and Cancelled shouldn't be the same color.

Andrea Neiman (aneiman)
Changed in evergreen:
importance: Undecided → Wishlist
milestone: none → 3.next
Changed in evergreen:
assignee: nobody → Stephanie Leary (stephanieleary)
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Thanks, everyone! This is excellent feedback.

I can make canceled something red or orange. Should it be more intense than delayed, or less? Should canceled get the solid black border, and maybe delayed could use black but in either the dashed or diagonal-stripe style?

Pending order -> green, will do. Should Order Ready get the light blue currently used by Pending, or something else?

For reference, here's the whole Bootstrap color spectrum: https://getbootstrap.com/docs/5.2/customize/color/ We don't use indigo, pink, or teal--our "pink" shades are the lighter half of the red scale. We use purple and orange in patron statuses, and I'm not opposed to using those more widely, but purple would be tricky to get right on this screen, since both red and blue end up similar to purple with some forms of color blindness.

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.