Member-only story

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

Uyen Vicky Vo
UX Collective
Published in
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

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Responses (3)

Write a response

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.