How to Check Your Game UI for Good Contrast [TATT #42]

the acagamic tip tuesday Dec 06, 2022
A screenshot of Dragon Age: Origins showing tiny text with no good contrast against the game world.

In today's issue 42 of The Acagamic Tip Tuesday,  I will show you how to make your game UI more accessible and easier to read with colour contrast to make it easier for all users to see and interact with your game.

Colour Contrast in Game UI: Ensure text and visuals have a high contrast ratio (difference in luminance values) against their background.

Contrast in game UI design is an important yet often overlooked element. Text size and contrast are two of the most common UI complaints. It can significantly impact the overall look and feel of a game and the usability of its menus and controls. 2.9 billion people struggle with low vision, and default game UI settings often lack sufficient contrast for players to use easily.

Ensuring Visibility Through Contrast Ratios

A contrast ratio is the luminance difference between an element's foreground and background. Support for configurable contrast can help gamers with disabilities increase the visibility of elements on the screen. Ensure text and visuals have a strong contrast ratio (difference in luminance values) against their background. If the contrast ratio isn't high enough, it may be difficult for some players to understand or use certain aspects of gameplay; this could be something as simple as navigating an area via a mini-map. Poor contrast ratios can lead to confusion and frustration, negatively impacting the gaming experience.

This makes contrast an essential element of game UI design, but it can also be a tricky and not obvious thing to work with. This is because contrast involves creating a visual difference between elements in a design, and this difference can be subtle or difficult to discern.

For example, consider a game UI that uses two shades of blue for different buttons. These buttons may look the same to the untrained eye, and the user may have difficulty discerning which button to press. This lack of contrast can lead to confusion and frustration for the player.

Accessibility Guidelines For Contrast Ratios

WCAG 2 (Web Content Accessibility Guidelines) is a set of guidelines and standards for web accessibility. The guidelines are developed by the World Wide Web Consortium (W3C), an international organization that sets standards for the web. WCAG 2 aims to make web content more accessible to people with disabilities, including those with visual, auditory, motor, and cognitive impairments.

WCAG 2 specifies a minimum contrast ratio for text, images of text, and graphical objects to ensure that all users can see them. It defines "luminance" as the measure of how light or dark a colour is relative to its environment, with higher numbers indicating greater brightness. The contrast ratio is calculated using the difference in luminance between two colours: if one colour has twice the luminance of another, it has a contrast ratio of 2:1.

There are three levels defined by WCAG 2: A, AA, and AAA. Normal text must have a contrast ratio of at least 4.5:1, and large text must have a contrast ratio of at least 3:1 to meet AA. For graphics and user interface components, such as form input borders, the contrast ratio must be at least 3:1. To meet the WCAG Level AAA requirements, normal text must have a contrast ratio of at least 7:1, and large text must have a contrast ratio of at least 4.5:1.

Too little contrast makes content difficult to read for people with vision impairments or other disabilities, so ensuring adequate levels are maintained throughout game UI design is important for making sure everyone can enjoy your game. Usually you'll be good if your game UI has either an AA or AAA level of contrast between elements on screen - this will ensure everything is easy to read and interpret quickly by players.

How to Check Your Colour Contrast

If you want to check the contrast between two colours, I recommend four tools:

  1. The WebAIM Contrast Checker (web-based)
  2. Use Contrast (Figma plugin and Mac app)
  3. Color contrast analyzer (Windows)
  4. Accessibility Insights (Several platforms, not Mac)

Colour hue is the range of colour shades, or hues, used in a design. For example, shades of red could include maroon, pink and scarlet. Colour contrast refers to the difference between two or more colours within the same design. It’s crucial for designers to be aware that colour-blind users may not perceive subtle differences in specific colour hues but can still distinguish differences in colour contrasts. This means they can recognize different levels of brightness and darkness even if they cannot identify certain colours accurately. To create designs that cater to both users with normal vision and those with colour blindness, it's beneficial for designers to focus on creating good contrast regardless of specific hues used within the design. Alternative methods, such as symbols or icons to help differentiate elements within a UI design.

Contrast and Text

Good contrast between text and the background is critical in game UI design as it makes the text easier to read. For example, dark text on a light background usually works better than vice versa. Players with cognitive disabilities may struggle to perceive text in high-contrast UIs. High contrast should be supported, but with configurable options for greater accessibility. The WCAG contrast tests can fail to identify text perceived as more readable for people with and without colour blindness. The guidelines are designed to be general and flexible and may not provide specific guidance for all types of content or situations. As a result, designers and developers may have to interpret the guidelines and decide how to apply them in specific cases. Provide players with a choice to customize UI and ensure accessible text. Remember that onscreen elements may not meet contrast ratios in all gameplay scenarios due to changing visuals.

Additionally, you should make sure that the font size and style are appropriate for your game's target audience—if they have difficulty reading small fonts, then it could ruin their gaming experience (see the example picture of Dragon Age: Origins above). Finally, don't forget to test out how your UI looks on different devices with different resolutions; this will help ensure that all players have an optimal viewing experience when interacting with your game's UI. For example, many PS5 games have notoriously small text even when displayed on a large TV, depending on the viewing distance of the player from the screen.

Other game UI areas where contrast is essential are (for more examples, check out Microsoft XAG 102):

  • Visual game elements like targeting icons and "halo" effects often require strong contrast to be visible.
  • Health, bonus, and objective meters should also be checked for good contrast.
  • Game maps should have a strong contrast between elements and their background. All map info, symbols and other elements should also be highly contrasted for clear visibility.
  • Good contrast between a slider/button and its background is essential for players to distinguish them easily. This applies especially to accessibility settings menus like volume or text scale adjustments.
  • Ensure symbols, glyphs and images conveying important info to players are easily distinguishable against their background.
  • Outline characters or critical elements to increase the contrast ratio. Outline colours should be configurable or provide strong contrast against all backgrounds.

In conclusion, contrast is a vital factor in UI design for games. Visual game elements, health and bonus meters, maps, buttons, and symbols should all have good contrast to ensure that they are easily visible to players. Additionally, accessibility settings menus should allow adjusting contrast. By paying attention to contrast, game designers can create a more accessible and user-friendly game experience for all players.

Games Research Find of the Week

This paper discusses the importance of accessibility in games for people with disabilities. The authors argue that guidelines for accessibility in games are not effective in providing inclusive experiences for players with disabilities and proposes the development of a vocabulary and language of game accessibility focused on the player experience rather than the ability to perceive or operate interactive technology. The proposed vocabulary includes access to controls, enablement to meet the challenges of the game, and the player experience itself. The goal is to support designers in creating accessible player experiences.

The number of players with disabilities is growing and there is a legal requirement for accessibility in games. Platform manufacturers and game studios are developing products that include accessibility options, and the authors suggest that human-computer interaction has long championed the accessibility of interactive systems, including games. They discuss the motivations for accessibility in games, including social justice and the desire of people with disabilities to play games.

The authors propose a vocabulary that builds on existing knowledge in game accessibility and includes terms representing essential concepts in accessibility in digital games. The proposed vocabulary is intended to stimulate discussion and break the silence on accessibility in games. They conducted a content analysis of existing guidelines, and identified high-level groupings that were used as terms in the vocabulary. The proposed vocabulary includes terms related to access to controls, enablement to meet the challenges of the game, and the player experience. The authors suggest that this vocabulary can be used by designers to develop accessible player experiences.

The proposed vocabulary is intended to be a generative form of intermediate-level knowledge that is suited to the development of accessible games. The authors suggest that this vocabulary can be used in conjunction with existing guidelines for accessibility in games, and can support the design of accessible games by providing a way to talk about different aspects of accessibility.

Read the full study: Power, C., Freire, A., Petrie, H., & Swallow, D. (2012, May). Guidelines are only half of the story: accessibility problems encountered by blind users on the web. In Proceedings of the SIGCHI conference on human factors in computing systems (pp. 433-442). https://doi.org/10.1016/j.ijhcs.2019.06.010 

Join UX rockstars learning about games, research, and writing

Each Tuesday, I will send you tips for UX in game research and design. And once a month, I will send you emails about academic writing.

No hassle, no selling your information, no spam. You can unsubscribe anytime.