Xbox Accessibility Guideline 102: Contrast

Goal

The goal of this Xbox Accessibility Guideline (XAG) is to provide enough contrast between visual elements and their backgrounds so that these elements can be interpreted by gamers with low vision.

Overview

There are approximately 2.9 billion people in the world with low vision. Default settings in a game can often result in UI elements that don't have strong contrasts against their background, making it difficult for players with low vision, or players with color vision deficiencies, to perceive and use these elements.

A contrast ratio is the difference in luminance values between the foreground and background of an element. Support for contrast configurability can be used as a tool by gamers with disabilities to help increase the visibility of elements on screen against their background. Typically, the "stronger" the contrast ratio, the greater the visibility of an element. If a player is unable to perceive a visual element because of low contrast and visibility, they might be excluded from aspects of gameplay that require the ability to understand or use that element. This can ultimately result in exclusion from gameplay altogether. For example, consider a mini-map on screen that provides information critical to gameplay but doesn't have strong enough contrast between its elements and their backgrounds to be visible to a player. They might now be unable to navigate to their next objective, identify where enemies or checkpoints are present, or perform other critical tasks that are informed by the mini-map.

Scoping questions

Are important visual elements in your game visible against their background?

• Text and its background color in menu UIs?

• The color of heads up display (HUD) elements against their background (like health meters, text, and mini-map elements)?

• Key gameplay elements against their background (for example, targeting icons are gray and should be discerned against a generally dark game environment background)?

Background and foundational information

Contrast and vision

Maintaining strong contrast ratios between visual elements and their background increases the visibility of these elements for players with low vision. Here are some examples of contrast ratios between text colors and their backgrounds for context. Additionally, this example provides a simulation of how text with low contrast ratios can be more difficult to read if a player has a type of low vision that affects clarity or is in a situational impairment such as playing in direct sunlight or at a distance. Note that with decreased sharpness, text with a strong contrast ratio is much more visible than text with a weak contrast ratio.

👁 Two column text contrast ratio example. The left column is labeled Example Text Contrast Ratios. Under it are different colored boxes with text inside that describes the contrast ratio of the text from the box it's in. The contrast ratios go from 1.2:1 to 21:1. The right column is labeled Example Text with 74% decreased sharpness. Below the label are the same boxes from the left column but are more blurry to show that higher contrast text is more legible, even when blurry.

It's also important to note that players with cognitive disabilities, such as difficulty reading, might find text in high contrast user interfaces difficult to perceive. While high-contrast experiences should at a minimum be supported, options for configurable contrast helps ensure that the needs of more gamers can be met.

Key areas where accessible contrast ratios are important

It's important to ensure that text and visual elements maintain strong contrast ratios against their background throughout all contexts of the game experience. Here are suggestions for key areas to assess.

Text elements

For a more detailed overview of where important text elements are frequently found in games, see XAG 101: Text display.

• Text in menu UIs

• Text that appears on screen during active game play

• Text in party chat windows (input field text, placeholder text, sent and received messages text)

• Text for subtitles and captions

• Text on loading screens that provide valuable information

• Text on error messages, toast messages, or other title-specific notifications

Non-text visual elements

• Visual cues:

• On screen HUD elements such as health meters, directional cues, and map elements:

• Buttons, sliders, and other controls:

• Symbols or glyphs:

• Characters and platforms:

• Images that contain key information.

How to measure contrast

There are many tools that can be used to measure contrast of an element and its background to ensure contrast ratios are met.

Contrast measurement tools:

1. Accessibility Insights for Windows

2. Color Contrast Analyzer by the Paciello Group

👁 A user checking the color contrast ratio in For Honor by using Accessibility Insights for Windows.

Accessibility Insights for Windows: measuring contrast video

General approaches to improving contrast

The best approach to ensuring text is accessible for as many players as possible is by providing players with choices to configure the UI to best address their needs.

Often, the gameplay environment is in constant visual flux, and on screen elements like text, symbols, or visual cues don’t meet contrast ratios at all times in all gameplay scenarios.

Here are some general approaches that can help increase contrast.

• Provide players the option to put a solid background behind any on screen text or give players the option to adjust the opacity of that background.

• Provide players color options for on screen text and elements so that they can choose what colors are most visible to them.

• Support a high contrast mode across different aspects of your game.

• Add borders around text or elements.

👁 Minecraft Accessibility Settings menu. The slider for Text Background Opacity is set to 100%. The Text Background option is set to chat. The Chat Text Opacity slider is set to 79%.

Text chat background opacity video

In Minecraft, players can adjust the opacity of text chat background.

👁 Three screenshots from Fallout: New Vegas with different colored HUDs. In one, the HUD is yellow; in the second, it's green; and the third, it's light blue.

In Fallout: New Vegas, HUD color can be changed by the player.

Implementation guidelines

Here are some guidelines to ensure that your game provides the minimum amount of configurability for contrast settings to meet the accessibility needs of more players.

• Large-scale text and large-scale visual elements should meet a minimum contrast of 3:1 against their background.

  • On console, large text is defined as:

    • 52 px at 1080p

    • 104 px at 4K

  • On PC/VR, large text is defined as:

    • 36 px at 1080p

    • 72 px at 4K

  • On mobile/Xbox Game Streaming, large text is defined as:

    • 36 px at 100 DPI

    • 72 px at 200 DPI

    • 144 px at 400 DPI

    • Scale linearly as DPI increases

• Standard-sized text and visual elements (those that aren't considered large-scale) that provide important information or context for gameplay should have a contrast ratio of at least 4.5:1 against their background.

• Text on inactive elements should meet a minimum contrast ratio of 3:1 against its background.

  • Inactive elements can include text within symbols, glyphs, or other visual elements that appear within the UI, but cannot be interacted with due to scenarios like:
    • The player has not yet unlocked the game area, item, or option associated with the inactive element
    • The option or visual element is disabled due to a lack of compatibility between the player’s software or hardware technical specifications and the requirements of the inactive option
    • Any other scenario in which a visual element present within the UI cannot be interacted with due to circumstances specific to that player

• Placeholder text, or text entered in an input field should meet a minimum contrast ratio of 4.5:1 (3:1 for large scale text) against the input field’s background.

• A high contrast mode (either light, dark, or both) should be provided. When enabled, the contrast ratios should equal or exceed 7:1 for all UI elements against their background.

Contrast ratio summary chart

• When text is displayed over a non-solid color background, the text contrast ratio should be measured between the text and the lowest contrasting area of the background.

• Where available, read the platform-provided contrast settings to determine whether high contrast modes should be turned on/off at game launch by default, and then adjust the game UI accordingly.

• Foreground and background text colors can be configured/set by the player.

• Avoid relying on color alone to communicate information. When this isn't possible, provide players the option to choose the color of key game elements.

• Images shouldn't contain text except for Logotypes.

• Text or visual elements that are part of a logo or brand name have no minimum contrast requirement.

• Text or visual elements that are pure decoration, that aren't visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Potential player impact

The guidelines in this XAG can help reduce barriers for the following players.

Resources and tools