Categories
Portfolio

A small win to fix your LibCal interface

It’s a small win to fix the interface in your library room booking software. Add stripes to help sighted users distinguish their booking.

It’s a small win to fix your LibCal interface just by adding a few lines of CSS. This popular library software handles bookings for equipment and spaces. By default, the public time grid uses cell colour (with a corresponding legend item) to indicate availability status in each time slot. In this post I’ll describe how you can add a stripe pattern to just one status. This will fix the interface for sighted users, particularly those with a red-green colour blindness.

A public time grid interface using coloured cells to indicate meeting room availability.
A legend below the grid ensures that information conveyed by cell colour is also available in text.

The screenshot above shows the public time grid with cells in default colours indicating:

  • available in green
  • your booking in yellow
  • unavailable in red

These colour combinations may not be an issue for users with regular vision (trichromatic). However, “The most common type of color blindness makes it hard to tell the difference between red and green.” (Types of Color Blindness)

A red-blind simulated view of the public time grid interface using colours to indicate availability status.
A red-blind (protanopia) simulation via Coblis — Color Blindness Simulator with the default colours demonstrates the difficulty to distinguish availability status.

A pattern fix

Adding a pattern to a colour fill is a technique applicable to situations such as a bar chart or a grid of coloured cells.

The objective of this technique is to ensure that when color differences are used to convey information within non-text content, patterns are included to convey the same information in a manner that does not depend on color.

Using color and pattern

Implementation

You can easily add a stripes pattern with the following CSS. Log in to the LibCal Admin Interface and head to the Look & Feel settings. Under the Code Customizations section:

  1. type <style>
  2. copy everything below and paste it in
  3. type </style> and hit the Save button.

See the Pen Fix the LibCal interface with stripes for Your Booking by Vernon Fowler (@vfowler) on CodePen.

Note that adjusting Color Settings for the Public Time Grid via Manage Equipment & Spaces has no effect while the custom code is overriding them.

Results

A red-blind simulated view of the fixed interface using stripes for your booking and contrasting colours to indicate availability status.
A red-blind (protanopia) simulation with a stripes pattern added to your booking, and contrast bumped solid colours indicating availability.
The fixed interface uses a stripes pattern for your booking and contrasting colours to indicate availability status.
Users who have regular trichromatic vision also benefit from a stripes pattern added to your booking, and contrast bumped solid colours indicating availability.

If you have plenty of scope, consider prototyping a more accessible redesign of the room reservation experience. In the meanwhile…

Ask your LibCal admin whether your users want a small win and fix the interface with 30 seconds of effort.


Thank you Chad Haefele for promoting this, fixing the LibCal interface at University of North Carolina Libraries, tweeting before versus after screenshots and asking SpringShare to consider implementing a stripes pattern in their product.

Leave a Reply

Your email address will not be published. Required fields are marked *