UI de jeu et HUD lisibles : tailles, contrastes et emplacements qui marchent en partie comme en stream

Entre un écran de 24 pouces sur bureau et un téléviseur à 3 m, la même interface ne se lit pas du tout pareil. Et si l’overlay vidéo ou les sous-titres cachent une jauge vitale, l’expérience s’effondre. L’objectif ici : poser des repères pratiques (tailles minimales, contrastes, zones sûres) et des méthodes de test que vous pourrez intégrer à votre pipeline UI/HUD, du prototypage jusqu’aux checks d’accessibilité et au streaming.

Quelles tailles de texte et d’éléments rendent un HUD lisible ?

• Fixez une taille par défaut suffisante à 1080p, puis mettez-la à l’échelle pour les autres résolutions. Côté consoles Xbox, les « Accessibility Feature Tags » exigent au minimum 26 px pour le texte par défaut en 1080p, et 50 px pour les sous-titres, avec police sans empattement et bon contraste (Microsoft Learn).
• Des recommandations de terrain poussent plus haut : la communauté IGDA Game Accessibility suggère 32 px par défaut à 1080p (et 46 px pour les textes temporisés comme les sous-titres) si la taille n’est pas configurable (IGDA GA‑SIG).
• Prévoyez un réglage d’échelle UI/HUD global et, quand c’est pertinent, des tailles dédiées pour journal, inventaire et mini‑carte. C’est un point attendu par les guidelines d’accessibilité Xbox, qui centralisent les bonnes pratiques par composant (Xbox Accessibility Guidelines).

Et pour les sous-titres ?

• Assurez une taille généreuse, un fond réglable et un positionnement qui n’occulte jamais des informations critiques ; c’est un attendu explicite dans les XAG « Subtitles and captions » (Microsoft Learn) et un point récurrent des retours utilisateurs compilés par le site Game Accessibility Guidelines.

Quel contraste viser entre texte/HUD et arrière‑plan ?

• Comme base robuste, respectez le ratio de contraste 4,5:1 pour le texte normal, seuil défini dans les critères 1.4.3 des WCAG 2.x (W3C WAI). Microsoft relaie le même minimum dans ses exigences d’accessibilité pour l’affichage du texte (Windows Dev Docs).
• Offrez des options de contraste/couleurs élevées et des fonds opaques derrière le texte (sous-titres, bulles d’info) afin de rester lisible en mouvement et en compression vidéo, ce que recommandent les XAG « High contrast » et « Subtitles » (Microsoft Learn; Microsoft Learn).

Où placer les éléments clés du HUD pour qu’ils soient toujours visibles ?

• Respectez la « safe area » d’affichage. Les API plateformes exposent un rectangle sûr à l’exécution (par exemple safeArea dans les structures d’affichage du GDK) : traitez‑le comme frontière minimale pour ne jamais tronquer texte et jauges (GDK best practices; XGameStreamingDisplayDetails).
• Côté moteurs, utilisez les composants prêts à l’emploi qui respectent ces marges ; par exemple, le widget Safe Zone d’Unreal applique automatiquement les limites de zone sûre aux UI UMG (Unreal Engine Docs).
• Évitez les chevauchements : réservez des « gouttières » pour les overlays externes (streaming, chat) et pour les sous‑titres agrandis, exigence rappelée dans les XAG sous‑titres.

Quels types d’UI/HUD choisir selon le genre et le contexte ?

• HUD non diégétique (barres de vie, mini‑carte) : lisible et stable, à condition d’offrir l’échelle et des contrastes réglables. Idéal pour l’action rapide.
• UI contextuelle/diégétique (indicateurs dans le monde, interfaces « in‑universe ») : immersive, mais à fort risque de perte de lisibilité sur fonds variables ; prévoyez un halo/fond et un seuil de taille minimal.
• Interfaces de menus (inventaire, craft, talent trees) : prévoyez des tailles supérieures au HUD et des regroupements spatiaux clairs, car la charge de lecture est plus longue.

Pour cadrer ces choix dans une démarche globale de design accessible, voyez notre page d’intro game design et accessibilité.

Comment passer de la théorie à vos écrans de jeu ?

1. Définissez vos tokens de taille à 1080p : « body » HUD ≥ 26–32 px, « subtitle » ≥ 50 px, « menu » ≥ 32–36 px. Les seuils de 26 px (Xbox Feature Tags) et 32/46 px (IGDA GA‑SIG) sont vos filets de sécurité (Microsoft Learn; IGDA GA‑SIG).
2. Mettez en place l’échelle UI globale (0,75× à 2× au moins) et, si possible, une échelle des sous‑titres séparée, comme le recommandent les XAG.
3. Appliquez un thème « contraste élevé » et/ou des curseurs de contraste/couleur pour HUD et cartes, en visant un ratio ≥ 4,5:1 pour le texte (W3C WAI; Microsoft Learn).
4. Ancrez tout élément critique dans la safe area runtime (GDK/engine) et laissez des marges réservées aux sous‑titres agrandis (GDK best practices; Unreal Engine Docs).

Comment vérifier que l’interface tient la distance (PC, TV, stream) ?

• Distance / contexte : testez à 60–100 cm (bureau) et à 2–3 m (salon). À chaque distance, contrôlez que vos tokens 1080p restent ≥ 26–32 px à l’écran après mise à l’échelle.
• Contraste : mesurez vos couples couleur/texte avec un outil de ratio (≥ 4,5:1), seuil WCAG repris par Microsoft pour l’accessibilité du texte.
• Sous‑titres : validez taille (≥ 50 px @1080p par défaut), fond et non‑chevauchement avec le HUD, comme demandé par les XAG.
• Zones sûres : activez les overlays de safe area du moteur et les rectangles safeArea du runtime plateforme ; simulez différents TV/overscans et overlays de stream pour repérer tout masquage (Unreal Engine Docs; GDK best practices).

Aller plus loin côté accessibilité

• Dotez votre jeu d’options clés (reliure des commandes, sous‑titres complets, modes daltoniens, assistances) et d’un onboarding qui les met en lumière. Pour une vue d’ensemble pragmatique par familles de besoins, appuyez‑vous sur les regroupements proposés par les Xbox Accessibility Guidelines et les fiches thématiques de Game Accessibility Guidelines.

• Si vous structurez votre démarche de conception, les « lentilles » aident à confronter lisibilité, charge cognitive et feedback ; voyez notre retour d’expérience sur les lentilles de conception et notre panorama des options d’accessibilité indispensables.