How a simple accessibility fix improved the experience for everyone

It all started with a bug report from a customer:

"One of my colleagues is color blind and has trouble distinguishing the color of the cards when in the retro meeting in the discussion phase. Currently the color palette when creating a template has 12 colors. Which makes it hard to pick four colors our colleague can easily distinguish."

The customer was referring to the reflection card component from Parabol's retro meeting, which includes a colored corner to categorize the reflection based on the retro's template:

When starting a Parabol retro the facilitator picks a template for the meeting. This template consists of two or more categories that help organize the reflections the attendees create. For example, the Glad, Sad, Mad template consists of, you guessed it, 3 categories (Glad, Sad and Mad) under which the reflections are added. Each category is given a specific color and included on the the reflection card for reference.

This is an issue for a color blind person as they are likely not able to distinguish between these colors, and so they don't have the reference that gives important context to the reflection.

My colleague Alicia Cressall and I paired to find a solution to this problem. We knew from the start that the issue was related to the use of color alone as a way to convey meaning, so that's where we started our exploration. It didn't take us too long to land on the most obvious and simple solution: a text label.

The text label makes it easier to identify the reflection's category for color blind users. The color would still be used, but it would no longer be the only means to identify the type of reflection.

We also quickly realized that the text label adds crucial context to the reflection, making it easier to identify for everyone. Consider this example:

On a Good and Bad retro template those two reflections could easily be categorized under either category. It can be good that we heard from a lot of customers post launch, but also it can be bad. Color blind or not, it's difficult to remember what color represented what category.

If instead we add text labels, the reflection has a lot more meaning:

While these reflections have the same content, when you add the text label the meaning is completely different.

Adding flexibility

We also anticipated that some users might not find this new feature welcoming, so we added the flexibility for anyone to remove the text labels:

This is a setting intended to be remember per user, so they don't have to hide/show the text labels every time they join a retro meeting.

Improving the experience for everyone

This was a relatively small accessibility fix but it's important we understand the significant positive impact an accessible interface has. We are humans, all with different backgrounds, contexts and needs, going through all sorts of things at all times, and I think that's beautiful.

As designers of digital interfaces, we need to periodically remind ourselves of the phrase "good accessibility is good usability".

✌️