What Game Colorblind Modes Teach About Accessible Palettes

A few years ago I built a dashboard with a status column in red, amber and green. It looked tidy, it passed review, and then a project manager told me, very politely, that every row looked the same shade of mud to him. He had deuteranomaly, the most common form of red-green colour deficiency, and my "obvious" traffic lights carried almost no information for him at all.

That conversation sent me somewhere I did not expect: the settings menus of competitive video games. Shooters and puzzle games have been wrestling with this exact problem for over a decade, because a player who cannot tell an enemy from a teammate loses the match and refunds the game. Their solutions are more practical than most of what I learned in design school, and almost all of them carry straight across to web and print palettes.

Why this is not an edge case

Roughly 1 in 12 men and 1 in 200 women of Northern European descent have some form of red-green colour vision deficiency. On a product with a few thousand users, that is not a rounding error. It is a decent chunk of the people trying to read your charts.

The trouble is that most designers test palettes with their own eyes, on their own calibrated screens, and declare them fine. Games could not afford that shortcut. Their audiences skew young and male, which pushes the share of colour-deficient players even higher, and their feedback arrives instantly in the form of angry forum threads. So studios learned the lesson in public, and their menus record what worked.

Filters versus fixes: the split games learned the hard way

Early colourblind modes were mostly full-screen filters. Fortnite, for instance, offers protanope, deuteranope and tritanope modes, each with a strength slider, and the filter remaps the whole image to push confusable hues apart. That helps, but players often describe it as making the whole world look strange, because it changes the grass, the sky and the skin tones along with the things that actually matter.

Later games got more surgical. Valorant leaves the world alone and lets you change one thing: the outline colour of enemies, swapping the default red for yellow or purple. Overwatch pairs its filters with a separate option to pick the enemy highlight colour. The Last of Us Part II, which shipped with more than sixty accessibility settings, includes a high contrast mode that greys out the environment and paints enemies red, allies blue and pickups yellow, so the information layer floats above everything else.

The lesson for designers is that a palette has two jobs that should be separated. One job is mood: the brand blues, the warm photography, the overall feel. The other is signal: success, error, selected, disabled, the series in a chart. Mood can be as subtle as you like. Signal colours need to be checked, and ideally swappable, without touching the mood at all. When I rebuilt that dashboard, I kept every brand colour and changed only the three status tokens. Nobody noticed except the people who needed it.

Never let colour carry the message alone

The single most reliable trick in games has nothing to do with choosing better hues. It is adding a second channel. Candy Crush gives every candy colour its own shape, so a red jellybean and a green square stay distinct even in greyscale. Puyo Puyo draws different faces on its blobs. Card games like Uno print numbers and symbols on every colour. Many shooters add a small icon or a different outline thickness for squad members alongside the colour change.

This is exactly what the WCAG guideline on use of colour (success criterion 1.4.1) asks for: colour should not be the only visual means of conveying information. In web terms, that means an error field gets an icon and a text message, not just a red border. A line chart gets direct labels or different dash patterns, not just five hues in a legend. A required form field gets the word "required", not a red asterisk alone. It sounds fussy until you look at a page through a simulator and watch half your signals vanish.

I wrote more about why contrast matters more than colour choice, and the same principle applies here. Lightness differences survive almost every type of colour deficiency. Hue differences, especially red against green at similar lightness, are the first thing to go.

A side-by-side of game techniques and their web equivalents

The contrast numbers in that table come from WCAG: 4.5:1 for normal body text and 3:1 for non-text elements such as chart lines and input borders. They are minimums, not targets, and I usually aim a little above them for anything that carries meaning.

Where the game approach does not transfer

I should be honest about one limit. Games can lean on a settings menu because players expect to spend ten minutes in one before their first match. Website visitors do not. Hardly anyone will hunt for a colourblind toggle on a booking form they will use once.

That means the default has to work on its own. On the web, user-selectable palettes are a nice extra for dashboards and tools people use daily, but the baseline palette must already survive deuteranopia, protanopia and tritanopia without any switch. In that sense web designers have a harder job than game designers, not an easier one. The games show us the techniques. They cannot excuse us from building them into the first thing everyone sees.

There is also a limit to simulators. They model typical forms of colour deficiency, and real vision varies a lot from person to person. When I can, I still ask one or two colour-deficient colleagues to look at a palette before it ships. In my experience they catch something the simulator missed about one time in three.

Try this on your current project

Open the page you are working on in Chrome, go to the developer tools, open the Rendering panel and use the option to emulate vision deficiencies. Switch through deuteranopia, protanopia and tritanopia, and also achromatopsia for full greyscale. For every element where meaning disappears, add a second channel: an icon, a label, a pattern or a clear lightness difference. It takes about twenty minutes for a typical page, and it is the same fix that let my project manager read his dashboard. For the colour theory underneath all of this, start with choosing colours that work together, then browse the rest of the games and design section.