Designing game worlds with color

Short answer

In games, climbable surfaces, breakable crates, and pullable levers are often marked with the same color, because the player has to answer the question "what can I do with this?" in a split second in a scene full of detail, and a consistent color builds a sign language that's learned once and read everywhere for the rest of the game. As graphics become more realistic, this need doesn't shrink, it grows, because as detail multiplies, so does noise, and interactive objects blend into the background; the same principles apply to separating friend from foe and to a zone's palette; but color alone isn't enough, because a meaningful share of players can't distinguish certain colors, and that's why good games back color up with shape, sound, and icons.

A game is an interface

A game scene looks more complex than the screens in the other UX lessons, but it does the same job: it tells the user what's happening, what matters, and what they can do. The difference is that this information isn't given in a menu, but inside a world, among trees, walls, light, and motion. Interaction states (UX-04), success and error colors (UX-02), and redundant coding (UX-07) apply here too; they're just embedded inside a scene.

The yellow paint debate

The question on the lesson card touches one of the most frequently debated topics in game design: why are climbable surfaces so often marked with the same color?

A recent example of this debate grew up around the 2023 remake of Resident Evil 4. The game marked climbable ladders and breakable barrels with yellow paint, and some players wrote that this paint was unnecessary, an insult to the player's intelligence, and a choice that broke the game's atmosphere. The developers who joined the debate mostly answered the opposite way. As one game designer put it, the push toward realistic art was increasing the need for unrealistic visual cues.

The design logic that comes out of this debate is this. In a realistic scene, every surface is full of texture, grime, rust, and light reflection; a ladder and a pipe, a wall ledge and a climbing point, sit at the same visual intensity. The player wanders the scene without knowing which one is usable, and gets stuck. A consistent color removes this uncertainty: the rule "yellow means climbable," learned at the start of the game, is read in every scene until the end of the game. Color, here, can be said to do the work of a dictionary, not an aesthetic.

Why the color is yellow can also be asked. Yellow is a high-lightness color and creates a strong distinction in dark or gray-toned scenes. A saturated yellow like #FFD200 gives a lightness contrast of about 3.5:1 against a medium gray wall like #6E6E6E. But the same yellow gives only 1.9:1 against a light gray like #9A9A9A, as on sun-bright concrete. So the power of the yellow cue depends on the rest of the scene being kept dark and low in saturation. The cue color and the scene palette are designed together: choosing the cue color is also choosing not to use that color anywhere else in the scene.

The other side of the debate has a point too: some players find the cues too conspicuous. That's why turning the cues into a setting is a solution often suggested in the debate; a player who wants to foreground the atmosphere can turn the cues down, while a player who has trouble finding their way or has a visual impairment can leave them on. This leaves the choice to the player instead of imposing one aesthetic preference on everyone.

Friend and foe

In multiplayer games and team battles, the most critical piece of information is whether a character is friend or foe. This information has to be read in a fraction of a second, and it's most often given through color.

A common solution is to assign red to the enemy and blue or green to the friendly side. The red–green pair sits right on the axis of the most common color vision deficiency, covered in BI-12, and is risky for that reason: the lightness contrast between #D23C3C red and #3CA03C green is only about 1.4:1. The red–blue pair is safer in terms of hue, but it has another problem: the contrast ratio between #D23C3C red and #2F6FDB blue is about 1.0:1. The hue is completely opposite, but the lightness is nearly identical; in the eyes of a player with limited color vision, on a colorless broadcast feed, or in a dark scene, the two teams can look the same.

That's why good friend-or-foe coding backs color up with lightness and shape. An icon above allies' heads, a different outline around enemies, a clear lightness difference between the two teams, and different movement sounds all carry the information that color carries through other channels as well.

Color-blind modes

Color vision deficiency isn't a small minority among players. Game accessibility guidelines state that difficulty perceiving red or green affects about eight to ten percent of men, and cite a sports game producer saying they estimate that more than half a million of their game's current users are color-blind.

Color-blind modes split into two basic approaches, and the difference between them matters. The filter approach applies a color filter over the entire image; every color in the scene goes through the same transformation. This approach is easy to implement, but it changes the whole scene, and instead of solving the problem it can bring other color pairs closer together. The element approach, instead, changes the colors only of the elements that carry information: the enemy outline, the team color, the damage indicator, the interaction cue. This approach demands more design effort, but while it preserves the scene's atmosphere, it moves only the critical information to a safe color pair. In both cases, a color-blind mode doesn't replace redundant coding; the information has to be readable through shape and icon even when the mode is off.

Colors in the game interface

Above the game world sits the game's interface, the layer that shows the health bar, ammo, map, and quest information. This layer's color problems are the same as in the other UX lessons, but the game's pace sharpens them: the player has to read an indicator in half a second.

A common pattern is for the health bar to be green when full, yellow as it drops, and red at the critical level. If the color change carries the information on its own, the bar speaks only through its length for a player who can't tell red from green, and that player notices the critical moment late. The solution is the game equivalent of the redundant coding in UX-07: the bar's length is already an information channel; the critical level is also signaled with a flash, an icon, a darkening that appears at the edges of the screen, or a sound cue. Quest markers on the map, too, are distinguished not only by color but by different icon shapes.

The interface layer has to stand apart from the game world's palette. The health bar's red can blend into the background in a red underground zone; that's why interface elements are usually separated from the world with a dark background strip or a thin outline, just like the strip placed behind the title over a portrait in UX-08.

Palette by zone

Games also use color to tell the player where they are. Each zone can have its own palette: a forest is built from greens and yellowish browns, an ice zone from cold blues and whites, an underground zone from dark oranges and reds.

A zone palette does two jobs at once. It builds atmosphere and makes orientation easier: the player understands which zone they're in without looking at a map. But a zone palette can clash with interaction cues. In a game that uses yellow cues, a yellowish desert zone can swallow the cues. That's why the visual language takes priority over zone palettes: the cue color stays the same across every zone, while zone palettes are kept away from the cue color, or the cue is adjusted slightly by zone, but not so much that it loses its recognizability. As the TK series explains for cultural color meanings, a zone's palette can also carry different associations in different markets.

Example — the glow of a talkable character

Consider an original exploration-game scene. Many characters are walking around a village square; the characters the player can talk to are marked with a warm orange glow around them, an outline in the shade #E8A04A. The game's character creator also gives the player a wide range of skin tones to choose from.

The math shows where this glow disappears, and the result is the opposite of most of the examples we've seen in this series: the orange outline gives a contrast of about 1.4:1 on a light skin tone in the shade #F1C7A9, 1.35:1 on #C68863, while it gives 2.8:1 on #8D5524 and 5.7:1 on #4A2C1D. So the glow disappears most at the edge of the face for light and wheat-toned characters. The team tries pulling the color toward yellow, #FFD24A; this time it drops to 1.1:1 on light skin. A white outline, too, gives only 1.6:1 on light skin. No single-color outline works on every skin tone at once.

The team carries the cue over to channels other than color. A small speech-bubble icon appears above talkable characters' heads, readable independent of the background. The edge glow becomes two-layered: a light line inside, a dark line outside, so that whatever the skin tone, one of the two lines separates from the face. A short sound cue also plays when the player gets close to the character. The team tests the result with characters across every skin-tone option in the character creator, in day and night scenes, with color-blind modes both on and off.

Common misconception

Summary

1. In games, climbable and interactive objects are marked with the same color, because a consistent color builds a visual language that's learned once and read in every scene; this need grows as realistic graphics increase visual noise, and the cue's power depends on the rest of the scene being cleared of that color.
2. Friend and foe are distinguished not only by hue but by lightness, outline shape, icon, and sound; the red–green pair sits on the axis of the most common color vision deficiency, while the red–blue pair is nearly identical in lightness.
3. Color-blind modes are more effective when they change only the elements that carry information, and they don't replace redundant coding; zone palettes are kept away from the cue color, and cues on characters are built with a two-layered outline, an icon, and sound so they show up on light and dark skin tones alike.

Test yourself

1. (Easy) In the Resident Evil 4 remake, which objects did the yellow paint mark?
2. (Easy) According to Game Accessibility Guidelines, about what percentage of men does difficulty perceiving red or green affect?
3. (Medium) Why are climbable surfaces in games so often marked with the same color?
4. (Medium) What are the two basic types of color-blind modes, and what's the difference between them?
5. (Hard) Red–blue team colors look safe in terms of hue — so why aren't they enough on their own?
6. (Hard) On which skin tones does talkable characters' orange glow disappear, and why doesn't a single color change solve the problem?

Answers

1. Climbable ladders and lootable barrels ("The yellow paint debate").
2. About 8 to 10 percent ("Color-blind modes").
3. The player has to understand in an instant what they can interact with in a scene full of detail; a consistent color builds a visual language that's learned once and read in every scene. As realistic graphics make materials noisier, objects blend into the background and the need for clear cues grows. The cue's power depends on that color not being used elsewhere in the scene, and on there being enough of a lightness difference ("The yellow paint debate").
4. Modes that apply a filter to the entire image, and modes that change the colors only of the elements that carry information. The first is easy but changes the whole scene and can bring other color pairs closer together; the second demands more effort but carries the critical information to safe colors while preserving the atmosphere ("Color-blind modes").
5. The lightness contrast between #D23C3C red and #2F6FDB blue is about 1.0:1; even though the hue is opposite, the lightness is nearly identical, and in the eyes of a player with limited color vision, on a colorless broadcast feed, or in a dark scene, the two teams can look the same. A lightness difference, an outline shape, an icon, and sound are needed ("Friend and foe").
6. The orange #E8A04A gives about 1.4:1 and 1.35:1 on light and wheat skin tones like #F1C7A9 and #C68863 respectively, and disappears at the edge of the face; yellow gives 1.1:1 on light skin, white gives 1.6:1. Every single color fails on some range of skin tones. A speech-bubble icon, a two-layered outline with a light line inside and a dark line outside, and a sound cue make the cue independent of skin tone ("Example — the glow of a talkable character").

Sources

• Austin Wood, "Debate over Resident Evil 4 Remake's yellow paint resurfaces as devs explain just how much help players really need," GamesRadar+, October 6, 2023.
• Game Accessibility Guidelines, "Ensure no essential information is conveyed by a fixed colour alone."
• Microsoft, "Xbox Accessibility Guideline 103: Additional channels for visual and audio cues."

Next step

EK-01 zooms into the screen itself: it shows, under a magnifying glass, how every pixel on a screen is made of three tiny light sources, how many steps each one can glow through to add up to 16.7 million colors in total, and how subpixels are arranged differently on different screens. EK-02, in turn, translates this light into numbers: it covers RGB values from 0 to 255, hex codes, the difference between HSL and HSV, their conversions, and each one's weak point.