Why Your Colorblind Accessibility Options in Video Games Don’t Actually Help

Around 8% of the world’s population has some form of colorblindness and the video game industry as a whole has only just started trying to make their content accessible to this community of people. For the past decade, many advances have been made in the gaming industry to address this issue, but for the most part these advances aren’t actually helpful. Let me explain.

Not Entirely Black and White

When most people think about the concept of being colorblind, they might initially think that a person who is colorblind sees the world like a 1920s movie. While this form of colorblindness does exist (Achromatopsia), it only appears in around 1 in 33,000 people. Putting that into a percentage, that’s 0.00003%. Now THAT is a small number.

The majority of colorblind folk are missing one of their cones that let them see that type of light. I’m no doctor, so I won’t go into the anatomy of our sight, but the TLDR is that our eyes have cones and those cones correspond to a color. So, if you’re missing a cone or it happens to be broken, you’ll have issues seeing colors relating to that cone.

So, how do you design for an audience that can’t see? Well, the answer isn’t actually color, much to the dismay of a majority of big-name developers. Who would have thought that changing a screen’s color wouldn’t actually help people who have issues identifying things based on color?

Wait, Changing the Screen Color Doesn’t Solve the Problem?

Imagine this. You are a part of the 1% of the world’s population who has Protanopia, making you blind to the color red. You open a game, look to the settings, and are pleased to see a color-blind settings menu! “What a treat!”, you think to yourself, and go to set it to Protanopia, only to find that nothing has changed. You sit back, puzzled. Is it broken? You set it to Tritanopia, and find that the colors have changed slightly, meaning that the game is technically working. You put it back, but the problem is still there.

So, what’s the problem?

The settings menu isn’t actually changing the screen to help those with their specific version of colorblindness view the game. What it’s doing is changing the screen to be filtered through a lens of that disability. It’s exactly what I did above with the graphic – someone who has one of those specified versions of color blindness will see no difference between the Original 6 colors and the ones I’ve chartered to be what those people would see.

“But E, that’s ridiculous! Obviously putting a game with a filter on it wouldn’t change a thing for people who are colorblind!”

You’re right; it IS ridiculous. But it’s true: that’s how Doom (2016) functions.

There’s two solutions to this problem.

The first solution is designing with accessibility in mind. For some reason, game companies don’t think about their disabled players… I would never have guessed. There are a few key components of accessible design from a colorblind perspective, which I’ll go over shortly.

The second solution is giving the player agency in their settings. Options in games are a must-have nowadays and a lack of options is an immediate head shake from a lot of players. I’ve personally opened an options menu in a Nintendo game and gone “Wow. Why do you even have a settings menu to begin with?” Seriously Nintendo, you can’t even let me turn on subtitles? SMH.

Designing For Accessibility

Before I get started, let me first state that I will ONLY be looking at this from the perspective of colorblind accessibility. General accessibility is an entirely other can of worms, and I’m not researched enough to be teaching about all of that.

We’ll be looking at design from a user interface perspective, as this is a UI-centric blog after all. The thing to remember when designing an accessible user interface is that you can’t rely on color alone to convey your point. Color is very important of course, but if you only use that to differentiate different items on the screen, you’ll be alienating 8% of your user base from the get go. To make sure you don’t alienate your user base, you should use at minimum one of the four following components in conjunction with color: iconography, texture, brightness, or saturation.

1) Iconography

Iconography refers to a pictorial representation of an idea or subject. If I tell you to think of a clock, you might conjure up something similar to the following image:

Yep. That sure is a clock.

Well, it’s actually an icon of a clock, but you get the point.

When designing a video game UI, icons are ESSENTIAL to convey an idea without overwhelming the player. I redesigned MegaMan Battle Network’s UI from the ground up for a project, and you can see in this early mock-up how my menu buttons are reliant on icons.

I know, it isn’t the best but it WAS an early mock-up and I DID do this almost two years ago. Now, what if I were to remove every icon?

Oh. Oh no. This is… awful! My white text on a light gray background was not the greatest to begin with, but now it’s all I have! But what if… what if it was worse? What if I had Deuteranopia? My grays are tinted blue-green, so what’s going to happen?

Yeah. Yeah that’s even worse. I can’t read that at ALL. If only I had something else to help me differentiate between these buttons…

Ah, NOW I know what these buttons are for.

I know that was a long tirade, but I hope you get the picture. The point is that icons are another way to help make your UI accessible when used alongside color, but once again it shouldn’t be the only component you use. Much like color, if you rely solely on iconography, you risk alienating those who might not recognize them (which is another issue entirely).

2) Texture

Texture, as defined by Merriam Webster, is “the visual or tactile surface characteristics and appearance of something”. It’s much easier to define texture when you’re discussing real objects that can be seen and felt. For example, sand’s texture can be coarse, rough, and irritating.

When it comes to video games however, texture can be divisive in what it refers to. I won’t get into the details, but when you have a 3D Model, say a cube, and want to make that cube look like a Rubik’s cube, you would apply a Texture to it. However, that isn’t what I’m talking about here, since I’m talking about the texture of the UI, which refers to the overall appearance and structure of it.

I mentioned in my post about dialogue user-interfaces that Dream Daddy does a great job of using texture to help differentiate their dialogue boxes to show who is speaking. Basically, depending on the location or the person, the dialogue box not only changes color but the patterns that are on top of the boxes change as well.

This can get distracting if used too often, so be cautious when doing something like that. It’s difficult finding a good balance between differentiation and distraction, but it can help elevate UI from the background and make it more accessible to those experiencing some form of colorblindness.

3) Brightness & Saturation

I see you getting your fingers ready to start trashing me in the comments:

“But E, brightness and saturation ARE color!”

“Oh E, you can’t call brightness and saturation a unique thing!!”

“E, you still owe me $20 you jerk!”

I hear you. I also hear these beautiful cotton balls that I’ve stuffed in my ears.

Anyways.

Brightness and Saturation are usually considered adjacent to color when it comes to accessibility, but that actually isn’t the case. When using a generic color wheel, there are three options available for you to fiddle with: the hue (the color), the saturation (the strength of said color), and the brightness (the, well, brightness of the color).

So yes, generally, these three can be lumped together to create a “color”. But! When talking about colorblind accessibility, the most important thing that you can do to make something accessible is changing up the saturation and brightness. I know, it’s confusing, so let me give you an example.

Here, I’ve taken the color Red (Hue: 0 Degrees, Saturation 100%, Brightness 100%) and adjusted it six times, only altering one of those values apiece. Now, I’m going to run this image through a color blind viewer, much like I did before.

See the issue? The 5th and 6th colors in the top right are practically indistinguishable when viewed through the lens of Deuteranopia. However, they’re still able to be differentiated in the colors below, where I’ve adjusted only the saturation and brightness. Now, I’m not saying you can’t use Hue to make new colors while still being accessible. Take a look at the full version of the graphic.

Here, I’ve also made some of the colors combine their numerical values. Or, in layman’s terms, I’ve just combined the colors. So, if you look in the Hue & Saturation row at the last color, its numbers are 115 Degrees, 15% Saturation, and 100% Brightness. Let’s run this image through the viewer again.

Can you see the difference? Aside from those top colors, every other color on this graphic is able to be distinguished between. So, when designing your UI, make sure to keep saturation and brightness in mind when changing your colors around, otherwise you might wind up making a menu that isn’t viewable by 8% of the population.

It’s About the Settings

Now, even if you listen to everything I’ve said, there’s still a chance that a person might get confused by some aspects of your design. Maybe the colors are still wrong, or maybe the icon or text you’ve used is confusing for some reason or another. Regardless of the “why”, you can do your best to help your audience by letting them help themselves!

The most basic example I can give you is button-mapping. Button mapping refers to a setting in video games where you can change what input results in what action.

For example, let’s say the “A” button has the main character jump, the “B” button has the main character punch their fist, and the “C” button makes them do a useless jig. With button mapping, I can give my player the option to swap any of these combinations around.

This same idea can apply to color accessibility settings. Much like button mapping, there are two avenues this can go down: a list of options, or full freedom color picking.

Giving the Player Options

Let’s backtrack to Doom (2016). While the final product is obviously not helpful in the slightest, the idea they started with is actually a viable solution.

Say you have a first person shooter. For this example, the enemy is going to be the color red, and your own team is the color green. Now, this poses an issue for those who have any form of red-green colorblindness. So, in the options menu, there can be multiple “team color” options. Maybe there’s a drop-down menu like in Doom (2016), but instead of it changing the screen filter, it adjusts the specific colors to be more distinct for those with that type of colorblindness.

While this isn’t a perfect solution, it doesn’t overwhelm the player with options. Having too many choices can be very confusing, and we as players have small little primate brains.

Letting the Player Choose

Now, here is what some might call the perfect solution. Free Range Color Picking. While the previous solution gives the player a few straight-options, this gives the player freedom. Why select from predetermined colors when you can make anything any color?

I know I mentioned that too many options can get overwhelming, but unlike a list of options where 20 is way too many items in a list, a color picker has a finite amount of colors. We’re not giving you the Wikipedia page of crayola colors in a drop-down menu; we’re giving you a familiar chart where you can adjust the HSB (Hue, Saturation, Brightness) to your liking.

Implementation

From a programming perspective, it’s actually not too difficult to do this. The TLDR is that implemented UI elements are actually white, and their colors are chosen in the engine through code.

So, let’s say that instead of it being chosen by the developer, the color is set to a variable called “Steve”. Steve is inherently the color white, but through the game’s code, Steve can be set to a different color in the settings by changing Steve’s numerical values. Essentially, instead of the developer changing Steve’s values, we hand the reins over to the player to change Steve around.

Now What?

I hope that you’ve enjoyed the post and perhaps learned a bit about colorblind accessibility along the way. I know I learned a lot making this post, mostly from this colorblind guide and this other colorblind resource. I’m interested to know if you have any other fun facts about video game accessibility, as there’s a lot more to it than just color blind accessibility, so if you know anything please feel free to comment down below. Stay fresh!