Using selection feedback to make a color-coded seat map usable for colorblind users

Question

I am designing a seat map in which different seats will be in different zones.

Each zone has a different price, so the zones are highly relevant to the user during seat selection.

However, because the seat map is built as a grid, I can't use lines or labels to demarcate the zones. I also can't use different icons to represent zones because I need icons to represent between different seat types (recliners, standard seats, etc.)

That leaves color.

In order to support colorblind users (and for the sake of selection feedback in general) I am planning to dynamically list the user's selections, along with the the corresponding zone surcharges on the bottom bar.

Does this provide enough support for colorblind users to make an informed seat selection regardless of whether or not they can differentiate between the zone colors?

Answer 1

I'm not sure if it's just the mockup you provided, but using outlines is a good way to indicate selection as well. If you provide a contrasting outline for your selections, it should be visually clear which seats are selected.

Alternatively, adjusting your selected seats' light/dark value should help as well. If all of your unselected seats have a relatively lighter color (as it appears in your mockup), making your selected seats even darker than demonstrated in the mockup would provide effective contrast.

Another thing to consider if you have the screen space: It looks like your sections of "seat levels" (i.e. bargain, value, choice) tend to be mostly in rows. If you can afford it, you could consider adding a label to the side of the section. This would allow you to get rid of the legend at the top altogether and rely less on colors overall.

As an example (obviously it could look loads better if this weren't a wireframe...):

^{download bmml source – Wireframes created with Balsamiq Mockups}