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.
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 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
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:
- copy everything below and paste it in
</style>and hit the Save button.
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.