Addressing color blindness in game design

As a game developer, I try to be accommodating to all types of players. One thing I learned pretty quickly after I released my first web game, Chroma Circuit, is that choosing colors (especially in puzzle games) is very important and not a task to take lightly. Color blindness can easily make two colors that seem very different to me look almost indistinguishable to others. When gameplay only relies on being able to see the difference between colors, you’ve got a problem.

As soon as I received the first request from a color blind user who was having some trouble with Chroma Circuit, I realized my mistake in simply choosing an aesthetic mix of colors that looked good to my own eyes. Only a couple of the colors seemed similar to the color blind player, but those were enough to take all the fun out of the game, and to make it mostly unplayable. Right away, I started putting together a new palette for Chroma Circuit. I’m no expert in this area, but I do have some tools at my disposal that certainly helped me out.

Photoshop color blindness modes

I think the first thing I did was take screenshots of a few levels from Chroma Circuit to load into Photoshop. Under the View menu, go to the Proof Setup sub-menu. This section lets you preview how your image will look in different color modes. For instance, designers can try CMYK to see how something might look a little different in print. You’ll find two options relevent to color blindness here, Color Blindness — Protanopia-type and Color Blindness — Deuteranopia-type.

Spectrum as seen with Protanopia-type and Deuteranopia-type color blindness

A standard spectrum of hues is shown above. Each of the color blindness proof options is shown for comparison. If you have a moment, and want some more examples, grab screenshots of your favorite websites that use an interesting mix of colors, paste into Photoshop, and take a look at how they change for color blind visitors. Below, you can see Chroma Circuit through the eyes of someone with Deuteranopia-type color blindness. The top half displays a level with the original colors, and the bottom half shows the same level after I made changes to the palette.

Screenshot of Chroma Circuit with color blindness mode enabled

To address the issue with Chroma Circuit, I took a pretty basic approach. I bumped up the contrast among each level’s colors as high as I could so that players could rely on brightness, in addition to hue. I generated the brightness levels based on the number of colors appearing in the level to achieve maximum contrast. If there were four colors required, I might set brightness values to 20%, 40%, 60%, and 80% brightness. If there were only three color needed, I would use 20%, 50% and 80%. The resulting colors weren’t particularly pretty, but they seemed to work well enough for the players who thanked me after I made the change (accessible in the Settings screen).

Screenshot of Chroma Circuit mobile with Pattern Mode enabled

When I brought Chroma Circuit to mobile devices, I decided to take a different approach based on a suggestion from a color-blind player. Rather than creating a palette of high-contrast colors, I decided to augment my regular palette with a set of unique patterns for each color, if “Pattern Mode” is enabled.

Screenshot of Qrossfire's symbols

With Qrossfire, another puzzle game I made, I tried adding something directly to the game, rather than making players enable it from the settings screen. In addition to colors, I created a set of visually unique symbols to display on the game board.

Screenshot of Gridshock with patterns mode enabled

In my most recent mobile game, Gridshock, I went back to making the patterns an option. Still, I feel like I integrated the patterns into the overall design better because I often “forgot” that I had the patterns enabled while testing. Additionally, Gridshock provided a new challenge that I think may have actually helped me design the patterns better. Since the timer bar shows the current color, and it’s a different shape than the squarish blocks in the grid, I had to ensure that the patterns were bold and flexible enough to display within differently-sized regions.

More Real-World Examples

Let’s take a look at some other games out there, including popular commercial titles to see how they handle (or mishandle) colors.

Bioshock screenshots

As I was writing this post, I was lucky to came across some complaints about BioShock 2, an example of a big commercial game that isn’t friendly with colors. Negative Gamer shows us What BioShock 2’s Hacking Looks Like if You’re Colour Blind.

Screenshot of Puzzle Fighter with color blindness comparison

Ars Technica had an article about the developers being unaware of color blindness a couple years ago. It includes the Puzzle Fighter screenshot comparison above, and many other examples described in the text, including first-person shooters, platformers, and more. Notably, New Super Mario Bros. doesn’t provide enough visual cues to easily tell the difference between Mario and Luigi.

Screen shot of Bejeweled showing the different shapes of colored jewels

In Bejeweled, each gem not only has a different color, but a different shape as well. These shapes are integrated into the design, and they’re always on by default. Instantly playable by color blind gamers!

Image of playing cards

I know, I know, it’s not a video game, but standard playing cards are an excellent example of game pieces that can be used by color blind players. Though card games often rely on the difference between red and black suits, color blind players shouldn’t have a problem with that. You might have never noticed, but both red symbols (hearts and diamonds) come to a point at the bottom while the black symbols (spades and clubs) have that little flat handle. Moreover, the contrast between red and black should be more than enough to allow players to note the difference, even if red looks a little more brown or yellow to them.

Don’t ruin the fun!

We all hate when players to stop having fun in our games for any reason. Though we might not be able to make changes to support all disabilities, ones like color blindness are often very simple to address, and I think it’s worth the small amount of effort required. One needs not ruin the aesthetic experience to make it happen either. If you can integrate various helpful tweaks into your main design, great, but a simple setting that can be enabled only when needed can be an acceptable alternative. Don’t forget that Photoshop provides tools that can be a big help in the process.

If you can, try to remember color blindness early in the design process, so that you don’t have to spend time changing an existing design that you might already be happy with. Not only will it save you frustration, but it might allow you to find better solutions that might not be acceptable later in the process.

About Josh Tynjala

Josh Tynjala is a frontend developer, open source contributor, bowler hat enthusiast, and karaoke addict. You might be familiar with his project, Feathers UI, an open source user interface library for Starling Framework that is included in the Adobe Gaming SDK.

Discussion

  1. Pingback: somerandomdude: Addressing color blindness in game design http://joshblog.net/2010/02/18/addressing-color-blindness-in-game-design/ — Some Random Dude

  2. Trung Truc

    Hi Josh,
    This is the first time I come to your blog, I’m really impressive in this article. Really good work.
    Thanks for sharing this experience.

  3. Con

    Thanks for this,

    Only recently became aware of the substantial number of people who are colour blind and gamers. Will be taking this into account for all my future developments.

  4. Awoo

    You gave the example of how bejeweled can be played easily by the colorblind. The main symbols are not a problem, the designers thought about them, it’s the multipliers in bejeweled which are only identifiable by color which are the problem! Seems the developers didn’t think it through beyond the main shapes!

  5. Netsy

    Actually, Bejeweled can still be somewhat challenging to the color deficient. The six-sided orange and eight-sided green jewels are both round enough that I have trouble distinguishing them at a quick glance. The 3D shading does not help matters.

    And don’t get me started on Bejeweled Blitz on Facebook! Blitz includes important “multiplier” gems, all of which are round and are only distinguishable by a thin band of color.

  6. Sharon J

    I run photoshop CS3, and alas, I do not have the colour blindness choices in the view proof menu. What version do you use?

    thanks for this, btw, it was really interesting

  7. Pingback: My feature wishlist for (PC) games « Take my advice, I don't use it anyway…

  8. matthew

    I sometimes play bio shock and I have trouble hacking because the green and yellow look very similar because I am colour blind red and green (colour blindness) but it affects most colours I was just wonder is there a colour blind setting for it ?

  9. Josh Tynjala

    matthew, I don’t think it has a setting. However, that’s not a game that I’ve played myself, so I don’t know for sure. I was merely linking to the article since it was relevant.

  10. Pingback: PC Gaming Feature Wishlist | The Gamerverse

  11. Jesse D

    I was Googling what jobs would be good for me with colorblindness and came across your joshhblog. I was interested in Electrical Engineering Technology but what I’ve been reading, I would have difficulty in that career choice. I suppose I’d have difficulty in the gaming as well. For example, yes, in Bejeweled I use the shapes. One challenge in that game, the green circles look practically the same to the orange hexagon type shapes when I’m trying to do the game quickly. I’m wondering what great jobs I can do with having colorblindness. In all your research and chatting with people, any ideas of how I could use my colorblindness as an advantage in a career choice? Thanks for the great information. I can hardly wait to try out the Chroma Circuit game.