The Halite Team of product managers is often responsible for evaluating design decisions, but it can be difficult to remember all the different people who will be using our products. One design choice became especially important to us given the kind of game we’re making and the audience we serve.
The amazing visual design team from Interactive Labs (http://interactivelabs.co/) had recommended a few color schemes for the Halite II game. For those who don’t know Halite, it’s an artificial intelligence programming competition where bots battle in space. We use our game board as a way to visualize what happened in a game so players can diagnose their code and learn about other players’ strategies.
Here's a sample game:
HOW WE STARTED
Our initial criteria had a few elements - we needed to include the teal color from Two Sigma’s brand (#62CECA) and ideally we would also have some of the yellows and oranges from the Halite brand. But the colors needed to be obviously different so that players could identify which player was which. The design team came back with a proposal for four game colors:
We loved these colors, and felt they met our criteria, but then we read this fascinating blog post from last year about color blindness:
A lot of work had been done in 2016 to improve the colors of Halite I to make their game boards more color-blind accessible. However, we felt their color schemes were not quite in line with this year’s branding, so we had some additional work to do. We decided we needed to tweak our colors to make them color-blind friendly this year as well, while maintaining our brand identity.
INVESTIGATING TYPES OF COLOR-BLINDNESS
First, we decided to mainly focus on the two most common types of colorblindness, Deuteranopia and Protanopia. We then applied filters to our existing colors using a tool called Color Oracle (http://colororacle.org/) to see what the game colors looks like for someone with colorblindness:
We tested a couple of different color schemes, and finally picked the game colors we are using now because they looked good and clear to both color blind and non-color blind players:
We were lucky that we only needed to swap out one color - the orange and the yellow were too similar for a color blind person. But the green we chose seemed to work well. We added these colors to the map visualizer, and forgot about this decision for a while.
After launching the game, however, we heard immediately from a color-blind player: while our four colors were sufficiently different from each other, the teal color we were using had the same saturation as our neutral planets.
Here are a few planets with the Deuteranopia filter:
The three larger planets are owned and colored blue, the smaller one to the left is neutral. But clearly with the filter on it's impossible to tell the difference. No wonder folks were having trouble.
We had learned through our original exploration that the biggest issue with something like this was saturation since our neutral planets are a fairly basic grey. It's not like we'd picked two shades of teal blue. So the design team recommended knocking down the opacity of the planets to 30%, 40%, or 50%.
We checked this recommendation against each type of color blindness:
Although the 30% opacity was the most clearly differentiated, we decided to go with the 50% opacity so that our planets are still clearly visible to those without color blindness. 30% opaque was just too feint.
The whole Halite team, from design to engineering to product, has learned a lot about building software in a colorblind-friendly way. It's not always easy but absolutely necessary for a game interface like ours.
Now that we’ve released these final changes, we hope that watching a game will be as clear to those with color-blindness as to those who are not. But please let us know if you see any other issues!