Member-only story

Making a ticketing system accessible for colorblind users — a UX case study

Published in

UX Collective

7 min readDec 24, 2019

ATG (The Ambassador Theatre Group) is known to be one of the largest ticketing vendors in the U.K. that offers tickets for large performances such as The Lion King musical and the Harry Potter series. Although ATG offers tickets for these big shows and has made it available for a wide range of audiences, their online booking experience was not created to be inclusive for all types of people.

In this case study, I want to address certain problems that have aroused this proposal and offer solutions on how we can improve accessibility for people with color blindness using the ATG booking experience as an example.

Disclaimer: I am not a colorblind expert. This case study was initiated for learning purposes. It is simply to go over the basic knowledge of different types of color blindness, what designers should be considering during the design process, and as well as raising awareness for designers to design for accessibility. All images are simulated only. Color Vision Deficiency varies by individual.

Colorblind 101

Examples of what standard color vision people see vs color blind people

Before getting into the problems of ATG’s booking system, let’s cover a basic understanding about color blindness. Color blindness is having the difficulty of distinguishing certain colors. It is known as Color Vision Deficiency and varies by individual. Below are some common types of color blindness.

Protanomaly is having the reduced ability to see red light. Protans (people who have Protanomaly) have difficulty distinguishing the difference between blue and green colors, as well as red and green colors.

An example of what people with Protanomaly color blindness see

Deuteranomaly is a reduced sensitivity to green light which is the most common type of colorblindness (Red-Green weak).

Very cool Uyen Vicky Vo! Interested to known how you were able to show what the ticketing page would look like to someone who has Achromatopsia. Is there a tool that does this or maybe a color conversion tool and then you manually updated the designs 🤔

I agree and loved the 4 points you did, First- only 2 colors (Available & Unavailable), second- showing booked ticket with the checkmark, third- hover state showing the details of the row and column of the auditorium and fourth- price filter.

But I’m…

Great write-up!

Did you consider lightning/darkening the color value of available seats based on their price? Using a scale similar to this: https://hihayk.github.io/scale/#4/3/60/45/0/0/0/0/1C60DB/28/96/219

This would be a colorblind-friendly way to get a rough sense of price before hovering to see the exact amount.