UX/UI design / DIJION
Beyond color: communicating state in apps and games
Design examples that distinguish errors, selections and game objects through text, shape and pattern as well as color.
A red border, green icon or blue game piece does not guarantee that its meaning is understood. Color discrimination, dim displays and visually busy backgrounds create different difficulties. Giving an essential state a second cue does not require abandoning the color palette.
Write down what each color communicates
Does red mean an error or a required field? Does a green game piece mean a safe area or group membership? Write each meaning explicitly. If the same color communicates different things across screens, consistency is a problem alongside color perception.
Scroll the table horizontally to see all columns.
| State | Non-color cue | Review question |
|---|---|---|
| Form error | Associated explanation and icon | Is the affected field and recovery clear? |
| Selected filter | Mark, border and programmatic selected state | Is selection communicated only by color? |
| Game-piece group | Distinct shape or pattern | Does it remain distinguishable in motion? |
| Completed task | Explicit completion text | Does success depend only on a green flash? |
Review contrast and meaning separately
WCAG’s Use of Color criterion addresses communicating information through color alone. Do not confuse that review with contrast: even strongly contrasting elements can depend solely on hue for meaning. The secondary cue itself must also remain readable and distinguishable.
Connect errors to the task
Instead of Fix the red fields, identify the missing or invalid information. Place the explanation near the relevant field and preserve its relationship for assistive technology. An unfamiliar exclamation mark alone is insufficient; include the recovery step in the text.
Check that secondary cues preserve gameplay
Adding patterns to a fictional matching game can unexpectedly change difficulty through pattern density or scale. Test moving objects rather than only a static illustration. A non-color cue shown only in settings may not help the actual gameplay decision.
Run a meaning-focused exercise
- Preview without color and check which states remain understandable.
- Do not treat that preview as a replacement for evaluation with people.
- Verify that text, shape and icons remain distinguishable on a small display.
- Complete the critical task again with sound off and larger text.
The useful handoff identifies the two cues carrying each essential meaning and the conditions used to test them. An attractive screenshot alone does not establish that the information is accessible.