Chapter 4: Inclusive UX: Subtitles, Icons, Contrast

Created by Sarah Choi (prompt writer using ChatGPT)

Inclusive UX: Subtitles, Icons & Contrast for Costume Concept Artists

Optimization & Accessibility through Budgets, Readability & Inclusion

Costume concept artists don’t usually see themselves as “UX designers”… but you absolutely are. Any time your outfit needs to read at a glance, work with UI frames, sit next to subtitles, or show information through icons and color, you’re influencing user experience.

In fast‑paced games, players rarely have the time (or visual bandwidth) to admire your costume in a clean turnaround. They’re reading subtitles, tracking HUD icons, watching VFX, and trying not to die—all while your costume attempts to communicate faction, class, power level, and personality. Inclusive UX is the discipline of designing your costume so that everyone—not just players with perfect vision, hearing, and reflexes—can understand and enjoy what you made.

This article looks at three UX pillars you directly influence as a costume concept artist:

  1. Subtitles – how costume design respects and supports text readability on screen.
  2. Icons – how your shapes, motifs, and color choices support clear iconography.
  3. Contrast – how you manage value and color contrast for readability and accessibility.

We’ll explore each through the lens of budgets, readability, and inclusion, with practical guidance for both concept‑side and production‑side costume artists.

1. Why Inclusive UX Belongs in Costume Design

When people hear “accessibility,” they often think of UI, audio, or settings menus. But costumes are part of the information layer of a game. They:

  • Signal who this character is (role, faction, rank, narrative importance).
  • Suggest what they can do (tank, healer, stealth specialist, support, vendor, quest giver).
  • Indicate state (damage, debuff, enraged, powered up, stealth mode).

If that information isn’t readable to a significant portion of players—because of poor contrast, over‑busy patterns, or clash with subtitles and icons—then your costume becomes exclusive by accident.

Inclusive UX for costume design means:

  • Your designs cooperate with subtitles, icons, and UI—not fight them.
  • Your choices are budget‑aware: limited icon space, limited line count, limited value bandwidth.
  • Your visual language is friendly to as many perception types as reasonably possible (color‑blind players, low‑vision players, players on small screens, players with attention or processing challenges).

You’re not expected to solve every accessibility issue alone, but you’re responsible for not creating avoidable problems, and for setting up other teams for success.

2. Subtitles & Costumes: Sharing the Screen

Subtitles are often treated as a UI afterthought, but they directly compete with your character’s lower body, trim details, and sometimes their entire silhouette. As a costume artist, your goal is to:

  • Make sure important read areas aren’t hiding behind or clashing with subtitle boxes.
  • Avoid value and color decisions that make captions hard to read when a character is behind them.

2.1 Where Subtitles Live

In most games, subtitles sit at the bottom center of the screen. Depending on the camera style, this area overlaps with:

  • Third‑person: hips, thighs, skirt hems, capes, holsters, weapons, hanging charms.
  • First‑person: NPC torsos and props when they step close to the camera.
  • Cutscenes: anything from waist to chin, depending on framing.

As you design, imagine a semi‑transparent subtitle bar across the bottom of your canvas. Ask yourself:

  • If subtitles were here, would they still be readable?
  • Does the costume create high‑frequency noise (tiny contrasty details) directly behind text?
  • Are I accidentally putting crucial story details (symbols, scars, insignia) exactly where subtitles will sit?

2.2 Value Budgets Under Subtitles

Subtitles rely heavily on value contrast between text and the background. Your costume is part of that background. A simple rule of thumb:

  • If subtitles are usually light text on dark box → avoid placing very bright, high‑contrast noise directly behind them.
  • If subtitles are dark text on light box → avoid dense dark patterning behind them.

Think in terms of a value budget:

  • Let the subtitle box own one extreme (dark or light).
  • Keep the background behind it in a mid‑value range with larger shapes and lower detail.

For example, if your UI team uses a dark, semi‑transparent subtitle box with light text, you can:

  • Keep the costume area under that box in a mid‑tone band.
  • Use larger, calmer shapes: broad cloth, smooth leather, gentle gradients.
  • Avoid sharp specular hits, micro‑patterns, and high‑contrast embroidery right behind expected subtitle placement.

2.3 Color & Subtitle Legibility

Even when subtitles have a solid box, extreme color choices on the character can bleed visually into that area. As a costume concept artist, you can:

  • Avoid intense, saturated accents exactly under expected subtitle positions.
  • Reserve those saturated pops for upper torso, shoulders, and head area where the player’s eye can enjoy them without competing with text.

Small production‑side note: when painting color keys or marketing frames, show at least one version with subtitles overlaid (even as a rough mock). This creates quick feedback loops with UX/UI to catch conflicts early.

3. Icons & Costumes: Visual Shortcuts to Identity

Icons are tiny, compressed versions of information. Your costume often drives the shapes and motifs that end up in:

  • Role and class icons (tank, healer, rogue, mage).
  • Faction badges, house crests, squad marks.
  • Ability and skill icons (fire shield, ice barrier, healing song).
  • Vendor or profession badges (smith, alchemist, tailor, quest giver).

If your costume design is full of unique little details but doesn’t produce clear, iconic shapes, downstream teams will struggle to build a readable icon language.

3.1 Icon Budgets

Every icon lives with multiple constraints:

  • Tiny canvas: 16–64px on low‑res HUDs, sometimes even smaller in lists.
  • Limited color and value ranges to match UI themes.
  • Must read in less than half a second as the player quickly glances at the screen.

When you concept costumes, you can help by:

  • Designing one or two strong, simple motifs per role or faction that can survive heavy simplification.
  • Ensuring those motifs are consistent across variants (starter → elite → legendary) so icons don’t need entirely different art direction for each tier.
  • Avoiding too many competing symbols: if everything is a logo, nothing is a logo.

3.2 Building Icon‑Ready Motifs from Costumes

Think of costume design as “icon generator.” As you sketch:

  • Look for bold shape opportunities: the silhouette of a pauldron, a unique helmet spine, a shield emblem, a trim pattern that can be isolated.
  • Favor motifs that can be drawn with 3–7 strokes when simplified. If it takes 20 strokes to communicate, it’s too complex for an icon.

For example:

  • A healer faction might use a soft rounded cross‑leaf emblem that appears on brooches, cloaks, and belts. This becomes the main HUD icon for healing skills and safe zones.
  • A lightning striker class might have a broken zigzag motif on bracers and chestplate, which becomes the root of their damage and mobility icons.

When you deliver your costume callouts, consider adding a tiny icon strip showing how these motifs could simplify for UI use. This isn’t mandatory, but it’s an enormous gift to UI/UX and helps maintain visual cohesion.

3.3 Inclusive Icons

Icons also need to work for players who:

  • Can’t rely on color alone (color‑blindness).
  • Play on small screens or with low graphics settings.
  • Have cognitive or attention challenges and need very clear, stable visual patterns.

As a costume artist contributing motifs, you can:

  • Use distinct silhouettes for different roles/factions, not just different colors.
  • Make sure your motifs have strong internal contrast (dark vs. light areas) to remain readable at small sizes.
  • Avoid over‑abstracting. A shield‑like shape for defense, a droplet or leaf for healing, a blade‑like mark for attack. Familiar metaphors help.

4. Contrast: The Backbone of Readability

Contrast is where accessibility and art direction meet. You’re constantly balancing:

  • Character readability vs. background.
  • Internal costume hierarchy (primary vs. secondary vs. tertiary details).
  • Cooperation with UI, subtitles, and icons.

4.1 Value Hierarchy as an Accessibility Tool

A clear value hierarchy acts like a roadmap for the eye. For inclusive UX, it should answer:

  • Who should I look at first? (hero vs. background NPCs).
  • Where is the face? (anchor of emotional communication).
  • Where is the important gameplay information? (role cues, weak points, interact points).

Practical approach:

  • Give the face and role‑defining elements (class markers, important gear) the strongest contrast area.
  • Keep secondary detail (trim, small decals, stitching) in a softer mid‑contrast band.
  • Use the lowest contrast on tertiary, decorative noise.

This structure helps players with low vision or on smaller screens focus on what matters most, even if they miss fine detail.

4.2 Color Contrast & Color‑Blind Considerations

You don’t have to be a color scientist, but you should:

  • Avoid relying on one color pair as the only way to distinguish teams (e.g., red vs. green), especially if those hues are similar in value.
  • Combine color with shape, pattern, and placement: different shoulder silhouettes, helmet profiles, or stripe patterns can separate teams even in grayscale.

As you paint, frequently check your design in grayscale or a low‑saturation mode. Ask yourself:

  • Can I still spot the faction?
  • Can I still see the class/role cues?
  • Does the face still pop?

If the answer is “no” in grayscale, some players will struggle even more in real gameplay scenarios.

4.3 Contrast Budgets with Environment & UI

Contrast is a shared resource between:

  • Character + costume
  • Environment
  • VFX
  • UI (including icons, subtitles, HUD)

As a costume concept artist, respect the global contrast budget by:

  • Avoiding maximum contrast everywhere on your design. Reserve extremes for priority information: face, role cues, key silhouettes.
  • Checking costume concepts against sample backgrounds and UI overlays. Don’t review characters exclusively on neutral gray; include snapshots over dark caves, bright snow, or hazard‑colored sci‑fi corridors.

If your costume always demands full attention, it may drown out subtitles and UI or cause eye fatigue. Inclusive UX favors a predictable, manageable visual rhythm.

5. Budgets: Screen Space, Complexity & Attention

Inclusive UX isn’t just about what looks good; it’s also about how much the player can handle at once. Your design choices either respect or overload three major budgets:

  1. Screen space – how much visual real estate your costume and its details occupy.
  2. Complexity – how many competing patterns, shapes, and cues you introduce.
  3. Attention – how many “loud” elements the player is being pulled toward while they’re also reading subtitles or checking icons.

5.1 Screen Space Budget

Big collar, giant pauldrons, wide hat, long cape, huge weapon, floating sigils, glowing wings… all incredible, but they consume screen space that UI, subtitles, and other characters might need.

To keep things inclusive:

  • Coordinate with character art / tech art to understand safe UI zones—areas that should stay calmer so UI and subtitles remain readable.
  • Avoid parking your densest detail in those zones. You can still design there, but use simpler shapes and gentler contrast.

5.2 Complexity Budget

Every added pattern, emblem, and trinket contributes to complexity. More complexity means more cognitive load, especially for players with processing or attention challenges.

Try to:

  • Prioritize a few strong, clear ideas over many small ones.
  • Group detail into clusters with breathing room rather than spraying micro‑detail everywhere.
  • Align complexity with narrative importance: legendary raid boss can be visually dense, but vendor NPCs and side‑quest givers should be simpler and easier to parse.

5.3 Attention Budget

The player’s attention is finite. If you put high‑contrast flashing elements near the subtitle zone or alongside critical HUD icons, you’re forcing the eye to compete.

Use attention intentionally:

  • High contrast + motion effects (glow, fluttering cloth) → reserve for combat or specific states, not idle loops where the player is reading subtitles.
  • Tone down emissives and specular hits around the HUD and subtitle bands.
  • Use calmer, more stable shapes during dialogue sequences if costumes are front and center behind subtitles.

6. Concept‑Side Practices: Designing with Inclusive UX in Mind

As a concept artist in the early phases, you have the most freedom—but also the most responsibility—to set up inclusive UX.

6.1 Work with a “UI Overlay” Layer

When you present key exploration sketches, consider:

  • Adding a ghosted UI frame that indicates approximate HUD and subtitle regions.
  • Showing one or two thumbnail mockups with the costume in‑game framing (FPP, TPP, isometric) and basic UI boxes.

This doesn’t have to be pixel‑perfect. It simply forces you (and your stakeholders) to see how readable the costume remains once UI and subtitles are present.

6.2 Value‑First Exploration

Start your exploration with value thumbnails before committing to color. This helps you:

  • Lock in clear silhouettes.
  • Assign value hierarchies with accessibility in mind.
  • Quickly test how your designs read at HUD scales and behind potential subtitles.

A useful practice is to create a “small preview strip” at the bottom of your canvas where each costume is shrunk to UI size. If you can still identify faction, class, and face orientation, you’re on the right track.

6.3 Intent Notes for UX/UI & Production

On your callout sheets, include small, direct notes such as:

  • “Lower torso kept mid‑value to support subtitle readability.”
  • “Faction emblem simplified for icon use (see corner swatch).”
  • “High contrast reserved for face, gauntlets (primary attack read).”

These notes communicate that you’re thinking about inclusive UX and invite UI/UX designers to collaborate proactively rather than coming in later with emergency fixes.

7. Production‑Side Practices: Guardrails & Checks

Production‑side costume artists (in‑house or outsourcing) are the last line of defense before assets ship. Even if the original concept didn’t fully account for inclusive UX, you can still make meaningful improvements.

7.1 In‑Engine Checks with UI & Subtitles On

Whenever possible, review your costume:

  • In‑engine or in‑editor, with the actual HUD and subtitle styles enabled.
  • In multiple environments (bright, dark, high‑saturation, low‑saturation).
  • In common gameplay cameras (combat, dialogue, inventory preview).

Look for:

  • Subtitle text becoming hard to read behind noisy costume areas.
  • Icons that no longer match costume motifs or that are confusing on small HUD.
  • Role/faction cues that disappear when the character is at mid‑distance.

Make subtle adjustments where you can:

  • Soften or simplify normal maps in subtitle zones.
  • Reduce saturation or contrast in busy areas directly behind text or UI.
  • Strengthen emissive or highlight placement on key role cues and face, if they’re getting lost.

7.2 LOD & Contrast Consistency

Level of Detail (LOD) meshes and materials often get simplified at distance. This can accidentally break your accessibility assumptions if:

  • Contrasty trim disappears but the underlying value becomes similar to the background.
  • Emissive markers or role highlights get turned off too early.

Work with tech art to:

  • Ensure that role‑critical visual cues survive further into distance than decorative detail.
  • Keep value and contrast relationships stable across LODs—even if geometry simplifies, the main dark/light blocks should remain.

7.3 Color‑Blind & Grayscale Passes

If tools allow, quickly preview your character in:

  • Simulated color‑blind modes (e.g., protanopia, deuteranopia, tritanopia).
  • Grayscale or very low saturation.

You don’t need perfection, but you should check that:

  • Opposing teams or factions are still distinguishable by shape and pattern.
  • Role cues (e.g., healer vs. damage dealer) remain visible without relying exclusively on hue differences.

Where possible, adjust:

  • Stripe angles, emblem placements, or shoulder/helmet shapes to make separation clearer without needing new textures.
  • Small local value tweaks to regain contrast in critical areas.

8. Inclusion as an Ongoing Habit

Accessibility is not a one‑time checklist; it’s a habit of mind. As a costume concept artist—whether on the concepting side or production side—you can cultivate this habit by regularly asking:

  • Can a tired player, on a small screen, still understand this costume during messy gameplay?
  • Does this outfit fight with subtitles, icons, or UI, or does it support them?
  • If someone can’t rely on color alone, can they still spot what matters?

When you keep budgets, readability, and inclusion in view, your costumes become more than visually impressive—they become welcoming. Players with different abilities, devices, and attention patterns can still enjoy the story, understand the mechanics, and connect with the characters you’ve brought to life.

And that’s the heart of inclusive UX in costume design: not making everything bland or generic, but designing with enough care and discipline that your most expressive ideas are reachable by as many players as possible.