Colour in game design: contrast, meaning and emotion

Andrew Elliot and Markus Maier’s review in the Annual Review of Psychology is a good corrective to pop colour psychology. It shows that colour can carry important meaning and can influence people’s feelings, thinking and behaviour, with much of the evidence coming from achievement and attraction contexts. It also warns that the field is at an early stage: earlier work suffered from methodological problems, and much more is needed on boundary conditions and real-world generalisability before strong recommendations are justified.

For game designers, that suggests humility. Popular claims about particular colours often run well ahead of this evidence, and very little of it was gathered while people were actually playing games, so the review’s call for more work on real-world settings applies to game design with extra force. Colour is a real lever, but claims like “this shade of blue lowers stress” should be treated as hypotheses to test with your own players, not as rules.

Sources1Source 1Elliot, A. J., & Maier, M. A. (2014). Color psychology: Effects of perceiving color on psychological functioning in humans. Annual Review of Psychology, 65, 95–120.

Are colour meanings universal or learned? Domicele Jonauskaite and a large international team asked 4,598 people in 30 nations, speaking 22 languages, to associate 20 emotion concepts with 12 colour terms. The patterns were strikingly similar across countries, with an average similarity of r = .88. Yet the nation a person came from still predicted their associations beyond the universal pattern, and similarity was greater between countries that were close in language or geography.

That is good news for a game with players around the world: broad colour meanings travel well. The local differences are a reason to back important meanings up with shape, text or position, rather than trusting colour to say the same thing to everyone.

Games also build their own colour languages on top of the shared one. Players quickly learn that a particular colour means health, or damage, or a locked door, and once learned, those meanings become expectations. Breaking them can be a deliberate surprise, but breaking them by accident is a common source of confusion. A game that uses red for both “danger” and “reward” asks the player to stop and think every time they see it.

Sources2Source 2Jonauskaite, D., Abu-Akel, A., Dael, N., Oberfeld, D., Abdel-Khalek, A. M., Al-Rasheed, A. S., Antonietti, J.-P., Bogushevskaya, V., Chamseddine, A., Chkonia, E., Corona, V., Fonseca-Pedrero, E., Griber, Y. A., Grimshaw, G., Hasan, A. A., Havelka, J., Hirnstein, M., Karlsson, B. S. A., Laurent, E., … Mohr, C. (2020). Universal patterns in color-emotion associations are further shaped by linguistic and geographic proximity. Psychological Science, 31(10), 1245–1260.

Erik Geslin, Laurent Jégou and Danny Beaudoin studied colour inside games specifically. They showed 24 video game images to 85 participants, asked how each made them feel, and compared the answers with measurements of the images’ colour. Brightness, saturation and lightness correlated significantly with emotions including joy, sadness, fear and serenity, and so did measures of how varied and eye-catching the colours were.

The study measured reactions to still images, not play, and correlations of this kind cannot prove cause. But it gives designers a vocabulary that is more useful than hue alone: the overall lightness and saturation of a scene, and how varied its colours are, may matter as much to its mood as which colours are in it. The authors use their results to propose “emotional colour scripting”, planning a game’s palette the way a film plans its lighting.

Sources3Source 3Geslin, E., Jégou, L., & Beaudoin, D. (2016). How color properties can be used to elicit emotions in video games. International Journal of Computer Games Technology, 2016, 5182768.

When the job is to be read, contrast wins. Richard Hall and Patrick Hanna tested four text and background colour combinations on web pages with 136 participants. Combinations with a greater contrast ratio were generally more readable. Colour did not significantly affect how much people remembered, but preferred colours earned higher ratings for aesthetics.

Gordon Legge and colleagues looked more closely at how contrast works. Normal readers could read as fast with strong colour contrast, text differing only in hue, as with strong luminance contrast, the difference in lightness. For readers with low vision, luminance contrast won every time. A design that separates pieces only by hue at similar lightness works for some players and fails others. The web’s accessibility guidelines set minimum contrast ratios for exactly this reason; the W3C’s explanation of contrast minimums is a clear primer.

Sources4Source 4Hall, R. H., & Hanna, P. (2004). The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. Behaviour & Information Technology, 23(3), 183–195.5Source 5Legge, G. E., Parish, D. H., Luebker, A., & Wurm, L. H. (1990). Psychophysics of reading. XI. Comparing color contrast and luminance contrast. Journal of the Optical Society of America A, 7(10), 2002–2010.

In a colour-sort puzzle, colour is not decoration; it is the rule. In OutBrick every brick goes home only through the gate of its own colour, and three or more of a colour in a line clear, so a player who cannot tell two colours apart cannot play. That is why colour-blind glyphs are on by default: every brick and every gate carries a matching symbol, so shape carries the sort as well as hue. We explain the reasoning in why colour should never be the only clue in a puzzle, and the accessibility page lists the rest of the support, including VoiceOver.

Mood and readability can live side by side if they are given different jobs. OutBrick’s Journey passes through 167 brick-built villages, from Cherry Blossom Town to Lavender Hills, and the scenery can change while the bricks on the board keep their colours and glyphs. For the practical side of reading a colour board quickly, see our colour sort puzzle tips. The research above adds a few principles that apply to any game with coloured pieces:

• Separate pieces by lightness as well as hue, so they stay distinct in dim light, on a cracked screen or for low vision.
• Give each colour one job, and keep it consistent across the whole game.
• Back every colour meaning with a second cue: a glyph, a shape, a position or a label.
• Use saturation and brightness to set mood, and keep the pieces themselves the clearest thing on screen.
• Test in greyscale. If the board still reads, the colours are doing extra work rather than all of it.

Sources5Source 5Legge, G. E., Parish, D. H., Luebker, A., & Wurm, L. H. (1990). Psychophysics of reading. XI. Comparing color contrast and luminance contrast. Journal of the Optical Society of America A, 7(10), 2002–2010.3Source 3Geslin, E., Jégou, L., & Beaudoin, D. (2016). How color properties can be used to elicit emotions in video games. International Journal of Computer Games Technology, 2016, 5182768.