Home

Provide high contrast between text/UI and background

The text and reticule on this is SO low contrast. The UI/menus are littered with pale yellow on white images. I hope this is fixed |:

(a) via Twitter

After text size, contrast is one of the most common UI complaints, There are common vision impairments that specifically result in a loss of contrast sensitivity, and others such as colorblindness that can be affected by contrast too.

Ensuring a good level of contrast also benefits many other gamers who have situational impairments, such as playing on a mobile device, in direct sunlight, or on a poor quality display.

Ideally place your text and UI elements on a plain high contrast background, or where that is not possible, use prominent outlines and shadows to separate them from the background. The web industry has an established testable limit for what constitutes adequate contrast for screens, which can be applied to games – a foreground/background contrast ratio of at least 4.5:1. a tool to test for this ratio is linked to below.

Note: There is a common misconception that high contrast text can trigger epileptic seizures. This is not true. Harding test fails can be resolved by maintaining contrast, increasing font size, reducing line spacing, or ensuring regular well spaced paragraph breaks.

Best practice examples:

Tools

Category & Level:

  • Vision (Basic)
(Opens in new tab)