Chapter 4: UI & Accessibility (Icons, Color‑Blind Safe, Subtitles)

Created by Sarah Choi (prompt writer using ChatGPT)

UI & accessibility (icons, color‑blind safe, subtitles) for prop concept artists

Why accessibility belongs in the prop pipeline

Props are interaction touchpoints. If their prompts, icons, and status reads are unclear or exclusionary, the loop breaks—players miss pickups, misread states, or feel sick from motion. Treat accessibility as a design constraint from blockout through paintover and handoff. For concept artists, this means designing icon systems, color logic, and motion that read at gameplay distance. For production artists, it means material IDs, sockets, pivot discipline, and packaging that let UI, VFX, audio, and localization wire features without hacks.

Principles to align on (put these in the style guide)

  • Redundancy over reliance: never communicate critical info with color alone—always pair with shape, text/icon, or motion.
  • Legibility at distance: target three reads (long/mid/close); icons must be recognizable at mid‑read without tooltips.
  • Predictable placement: reserve planes and rails on the prop where prompts and subtitles can anchor; avoid curved glass unless you provide a flat proxy.
  • Comfort first: cap flicker, bloom, and animation amplitudes; avoid inducing nausea or photosensitive risks.
  • Localization‑ready: text, numerals, and units must be swappable without re‑layout.

Spatial metrics and anchoring

Define where UI lives in 3D so it’s consistent and cullable:

  • UI planes: flat surfaces angled 10–20° toward typical approach, sized so key icons subtend ≥0.5–0.7° of visual angle at mid‑read (≈24–32 px at 1080p equivalent).
  • Prompt cones & radii: document the interaction cone (e.g., 60°) and pickup radius (0.6–1.2 m) so UI appears only inside gates.
  • Safe areas: keep prompts within 15–25° of screen center at intended approach; far‑edge prompts are missed and strain the neck.
  • Sockets: create named empties (e.g., UI_PLANE_A, UI_ANCHOR_PROMPT, CAPTION_ANCHOR) with local Z+ facing the viewer; zero transforms.

Icon systems: shape grammar that scales

Design families, not one‑offs. Build a shape grammar:

  • Action icons (tap/hold/aim) use distinct frame shapes: circle = hold, chevron = tap, brackets = aim.
  • State icons (ready/busy/error/complete) use the same base with interior glyph swaps; maintain a persistent outer silhouette.
  • Affordance icons (grab, insert, rotate, cut) reference physical affordances—match handle orientation and motion arrows to the prop. Keep icons at 1–2 stroke weights across sizes; avoid hairlines that shimmer at distance. Provide monochrome and high‑contrast variants.

Color logic: CVD‑safe palettes and contrast

  • Meet WCAG contrast: 4.5:1 for normal text, 3:1 for large text/symbols; treat icons like text for safety.
  • Use CVD‑safe pairs (approximate):
    • Interact/Ready: Cyan/Blue family
    • Busy/Cool‑down: Amber
    • Success/Complete: Green‑teal (lean toward teal to avoid red‑green confusion)
    • Error/Locked: Magenta/Violet + shape cue (X/lock)
  • Provide a color‑agnostic mode that swaps hue cues for patterns (stripe fills, dot fills) and shape animation.
  • Reserve faction/brand colors; status colors must not collide with team identity.

Motion & timing: clarity without sickness

  • Idle: 4–8 bpm (slow pulse/scan).
  • Ready: 0.2–0.3 s settle, brief brighten.
  • Working: 0.8–1.2 Hz rhythmic loop matched to machine cadence.
  • Complete: pop/flash 0.15–0.3 s then decay ≤0.6 s.
  • Fail/Error: blink at ≤1 Hz; avoid rapid strobe. Comfort caps:
  • Avoid high‑contrast flicker >3 Hz (photosensitivity risk).
  • Keep screen‑space motion amplitude small at mid‑read; camera‑relative UI should travel <2° visual angle unless explicitly diegetic.

Text, numerals, and units

  • Choose a condensed sans with clear distinctions (Il1, 0OØ). Provide a fallback Noto‑class font for international glyphs.
  • Minimum text at mid‑read: ≥0.5–0.7° visual angle (≈24–32 px at 1080p equivalent); subtitles ≥0.8–1.0° (≈36–48 px) when anchored to props.
  • Use real units (mm, N, °C) when diegetic; otherwise, favor icons + bars over long strings to minimize localization churn.
  • Keep label rails (engraved brackets) on models to anchor text and prevent texture warp.

Subtitles & captions for prop Audio

Not all props need dialogue, but many emit meaningful sounds (beeps, warnings, pressure vents). Support players who rely on text:

  • Provide a CAPTION_ANCHOR socket on the prop’s viewer‑facing side.
  • Write caption templates for beats: “Bench ready,” “Processing…,” “Crafting complete,” “System error.” Keep them concise and avoid idioms for localization.
  • Indicate source in brackets when multiple sounds overlap: [Steam hiss], [Servo whirr], [Warning beep ×3].
  • Respect user settings: captions toggle separate from dialogue subtitles; ensure your beats map to those channels.

Diegetic vs HUD: a hybrid approach

  • Diegetic first: craft models with recessed light pipes, tiny screens, and label rails; these carry primary prompts and status.
  • HUD backup: for low‑contrast scenes or small props, mirror essential prompts in HUD at a smaller scale. Keep iconography identical.
  • Provide Material IDs for UI surfaces (EMISSIVE, LIGHT_PIPE, SCREEN, LABEL) so lookdev can isolate bloom and noise.

Photobash & scan ethics in UI

  • Do not paste real brand icons, medical labels, or safety symbols without license/permission.
  • Avoid bashing copyrighted UI screenshots; build vector‑clean originals.
  • Strip baked lighting from scanned stickers; re‑albedo or rebuild vector decals to prevent double highlights.
  • Maintain a source sheet (thumbnail, author, license, link) in the PSD for any external references.

Accessibility for color‑vision diversity (CVD)

Design redundancy:

  • Pair hue with shape (e.g., triangle = warning, circle = action hold) and pattern fill.
  • Add luminance contrast independent of hue (light icon on dark plate or vice versa).
  • Offer a CVD preview layer in the paint template (simulate Protan/Deutan/Tritan) and adjust before handoff.

Haptics & audio pairing (if applicable)

  • Map haptics to beats (short tick at Ready; brief rumble ramp during Working; distinct click at Complete). Keep amplitudes low and durations short.
  • Align audio motifs with icon animation so players can anticipate timing without watching the screen.

Testing at speed (artist loop)

  1. Render a neutral studio plate of your prop with UI planes and emissive masks.
  2. Composite icon/text at target sizes (mid‑read); apply CVD simulation and motion blur.
  3. Downscale to gameplay resolution; verify contrast ratios and stroke legibility.
  4. Preview motion beats at 1× and 0.5× speed; check for flicker risk.
  5. Export a one‑page accessibility sheet with sizes (deg/px), contrast values, and beat timings.

Packaging & handoff

Include:

  • Layered PSD with separate groups for icons, text, patterns, and emissive.
  • EXR pack: IDs (EMISSIVE/SCREEN/LABEL), glow mask, occluder shell indication.
  • Vector SVG/AI icon set (monochrome + high‑contrast) with a naming schema: ICO_Action_Hold, ICO_State_Error, ICO_Afford_Grab.
  • Socket list with transforms (UI_PLANE_A, UI_ANCHOR_PROMPT, CAPTION_ANCHOR).
  • A short Beat Bible: timing (Idle/Ready/Working/Complete/Fail), icon used, color keys, audio notes.
  • Localization notes: strings, unit policies, text expansion allowances (aim for 30–50% growth).

Common pitfalls checklist

  • Relying on red/green without shape change → unreadable for many players.
  • Prompts placed on curved glass → HUD warps; provide flat proxies.
  • Hairline icon strokes → shimmer and moiré at distance; bump stroke weight.
  • Excess bloom on emissive → destroys contrast and muddies icons.
  • Photobashed real brands/symbols → legal and story conflicts.
  • Subtitles missing for machine sounds → players miss readiness/error cues.
  • Material IDs shuffled across variants → UI masks break on upgrade/damage.

A 45‑minute drill

  • 0–10 min: Add UI_PLANE_A and CAPTION_ANCHOR sockets to a prop; reserve surfaces.
  • 10–20 min: Build a 4‑icon mini set (tap/hold/ready/error) with CVD‑safe color keys and pattern fills.
  • 20–30 min: Composite on a lighting plate at mid‑read; check contrast and motion.
  • 30–40 min: Add caption templates and export a Beat Bible snippet.
  • 40–45 min: Package PSD + SVGs + EXR IDs + socket list; run a quick CVD simulation pass.

Closing

Accessible UI isn’t a bolt‑on; it’s a design language that lives on the prop. By reserving surfaces, standardizing icons, designing CVD‑safe color and motion, and packaging clean IDs and sockets, you empower UI, VFX, audio, and localization to wire interactions that feel clear, fair, and inclusive. When clarity leads, style follows—and your props ship stronger for every player.