> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mode de contraste élevé

> Mode de contraste élevé

Selon le jeu de couleurs de votre titre, il peut arriver que vos dispositions tactiles soient difficiles à voir parce qu'elles contrastent mal avec votre titre qui s'exécute dans le flux sous-jacent. Cela peut être particulièrement problématique pour les joueurs ayant une basse vision, un daltonisme ou d'autres déficiences visuelles. Le mode de contraste élevé est un paramètre du client qui, lorsqu'il est activé, ajoute des contours supplémentaires et des plaques d'arrière-plan aux boutons stylisés avec une [icône](/fr-CA/reference/system/touchadaptationkit/types/game-streaming-touch-icon), et modifie les [couleurs système](/fr-CA/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette#system-colors) pour augmenter le contraste.

Par exemple, voici la disposition standard sur une couleur d'arrière-plan pâle unie, avec le mode de contraste élevé **désactivé** :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-standard-layout-hc-disabled.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=85031770174be52e17016d4180932b8c" alt="Disposition tactile standard avec le mode de contraste élevé désactivé" width="1748" height="732" data-path="images/gdk/features/common/game-streaming-tak-standard-layout-hc-disabled.png" />

Et voici la même configuration avec le mode de contraste élevé **activé** :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-standard-layout-hc-enabled.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=231efc670c084eab9743a002e7582c0b" alt="Disposition tactile standard avec le mode de contraste élevé activé" width="1720" height="720" data-path="images/gdk/features/common/game-streaming-tak-standard-layout-hc-enabled.png" />

Bien que vous puissiez vous fier aux valeurs par défaut du système pour le style du mode de contraste élevé, vous pouvez également inclure des [variantes à contraste élevé de vos ressources personnalisées](#custom-assets-for-high-contrast-mode) et [remplacer les couleurs système](#overriding-system-colors-for-high-contrast-mode) pour qu'elles correspondent à l'esthétique visuelle de votre jeu.

<a id="custom-assets-for-high-contrast-mode" />

## Ressources personnalisées pour le mode de contraste élevé

Lorsque vous utilisez des [ressources personnalisées](/fr-CA/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets) dans votre touch adaptation bundle, vous pouvez inclure des variantes à contraste élevé pour chacune de vos ressources à contraste standard. Ces variantes à contraste élevé sont ensuite affichées chaque fois que le mode de contraste élevé est activé. Les ressources sont désignées comme variantes à contraste élevé en ajoutant un suffixe `.hc` après le nom de la ressource et avant l'extension du fichier. Par exemple, prenons `myAsset.png` (à gauche) et sa variante à contraste élevé, `myAsset.hc.png` (à droite) :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-hc-mode-asset-compare.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=885859b7d5033c88231c7d91379e3789" alt="Comparaison côte à côte d'une ressource personnalisée et de sa variante à contraste élevé" width="500" height="240" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-asset-compare.png" />

Lorsque vous disposez vos ressources sur le disque, les ressources à contraste standard et à contraste élevé sont [organisées par langue et par échelle de ressource](/fr-CA/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets#asset-files) comme d'habitude. Pour les ressources ci-dessus, la structure de fichiers pourrait ressembler à ceci :

```
assets/
└───neutral/
    ├───@1.0x/
    │       myAsset.png
    │       myAsset.hc.png
    ├───@1.5x/
    │       myAsset.png
    │       myAsset.hc.png
    ├───@2.0x/
    │       myAsset.png
    │       myAsset.hc.png
    ├───@3.0x/
    │       myAsset.png
    │       myAsset.hc.png
    └───@4.0x/
            myAsset.png
            myAsset.hc.png
```

Dans une disposition, les ressources sont référencées [sans l'extension du nom de fichier](/fr-CA/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets#referencing-assets-from-layouts) **et sans le suffixe `.hc`**. Par exemple, un bouton stylisé avec les ressources ci-dessus pourrait être configuré ainsi :

```JSON theme={null}
{
    "type": "button",
    "action": "gamepadA",
    "styles": {
        "idle": {
            "faceImage": {
                "type": "asset",
                "value": "myAsset"
            }
        }
    }
}
```

Avec ce style, le touch adaptation kit sélectionnera automatiquement `myAsset.png` ou `myAsset.hc.png` selon que le mode de contraste élevé est désactivé ou activé, respectivement. Ce style donnera le résultat suivant lorsque le mode de contraste élevé est **désactivé** :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-hc-mode-asset-hc-disabled.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=17a73184c12252fab57e7be80a1e2022" alt="Disposition tactile avec des ressources personnalisées et le mode de contraste élevé désactivé" width="158" height="146" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-asset-hc-disabled.png" />

Et le résultat suivant lorsque le mode de contraste élevé est **activé** :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-hc-mode-asset-hc-enabled.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=16bbc1ca5209403e976582729e3bb4b9" alt="Disposition tactile avec des ressources personnalisées et le mode de contraste élevé activé" width="216" height="178" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-asset-hc-enabled.png" />

<a id="overriding-system-colors-for-high-contrast-mode" />

## Remplacer les couleurs système pour le mode de contraste élevé

Les [palettes de couleurs](/fr-CA/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette) de vos dispositions tactiles ou de votre [fichier de contexte](/fr-CA/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-bundle#context) peuvent servir à remplacer les [couleurs système](/fr-CA/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette#system-colors). Les commandes utilisent implicitement les couleurs système pour leur style, ce qui signifie que tout remplacement aura une incidence sur le style global de toutes les commandes (à moins qu'une commande ait son propre remplacement dans un bloc `styles` personnalisé).

Par exemple, la disposition suivante remplace certaines couleurs système pour obtenir un style personnalisé lorsque le mode de contraste élevé est activé :

```JSON theme={null}
{
  "$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/main/touch-adaptation-kit/schemas/layout/v4.0/layout.json",
  "styles": {
    "colors": {
      "highContrast": {
        "system_contentPrimary": "#ff00ffff",
        "system_contentSecondary": "#00ff00aa",
        "system_contrastPrimary": "#ff0000aa"
      }
    }
  },
  "content": {
    "left": {
      "inner": [
        {
          "type": "joystick",
          "axis": {
            "input": "axisXY",
            "output": "leftJoystick"
          }
        },
        {
          "type": "button",
          "action": "dPadRight",
          "styles": {
            "default": {
              "faceImage": {
                "type": "icon",
                "value": "map"
              }
            }
          }
        }
      ]
    },
    "right": {
      "inner": [
        {
          "type": "button",
          "action": "gamepadY"
        },
        {
          "type": "button",
          "action": "gamepadB"
        },
        {
          "type": "button",
          "action": "gamepadA"
        },
        {
          "type": "button",
          "action": "gamepadX"
        }
      ]
    }
  }
}

```

Dans la disposition ci-dessus, trois remplacements de couleurs sont déclarés dans le bloc `highContrast` et ne seront appliqués que lorsque le mode de contraste élevé est activé :

1. `system_contentPrimary` remplacera le style appliqué au contour du milieu du joystick et à la teinte de l'icône de carte.
2. `system_contentSecondary` remplacera le style appliqué au remplissage du joystick.
3. `system_contrastPrimary` remplacera le style appliqué au contour extérieur du joystick et aux plaques d'arrière-plan des boutons.

La disposition ci-dessus avec le mode de contraste élevé **désactivé** :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-hc-mode-color-palette-hc-disabled.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=a93237ada225eaa57786ab5b5aa021f2" alt="Disposition tactile avec remplacement des couleurs système et le mode de contraste élevé désactivé" width="1060" height="456" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-color-palette-hc-disabled.png" />

Et avec le mode de contraste élevé **activé** :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-tak-hc-mode-color-palette-hc-enabled.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=fa21e3242ff8a0f9303438421f600b21" alt="Disposition tactile avec remplacement des couleurs système et le mode de contraste élevé activé" width="1066" height="456" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-color-palette-hc-enabled.png" />

## Activer le mode de contraste élevé

Vous pouvez tester le mode de contraste élevé dans l'une ou l'autre des applications de test de contenu (CTA) [Web](#web-cta), [Android](#android-cta) ou [Windows](#windows-cta).

<a id="web-cta" />

### CTA Web

Pour activer le mode de contraste élevé dans la [CTA Web](/fr-CA/build/core-features/common/game-streaming/game-streaming-web-content-test-application) :

Cliquez sur votre profil et accédez à la fenêtre « Settings » :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-hc-mode-nav-1.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=649e4637aec162e9257726f415d68687" alt="Activation du mode de contraste élevé dans la CTA Web, étape 1" width="763" height="1024" data-path="images/gdk/features/common/game-streaming-web-cta-hc-mode-nav-1.png" />

Accédez à « Accessibility » et cochez « Enable high contrast in-game » :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-hc-mode-nav-2.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=bbcc6f31f0926c93c0999ecb831b52a7" alt="Activation du mode de contraste élevé dans la CTA Web, étape 2" width="1742" height="910" data-path="images/gdk/features/common/game-streaming-web-cta-hc-mode-nav-2.png" />

<a id="android-cta" />

### CTA Android (déconseillée)

Pour activer le mode de contraste élevé dans la [CTA Android](/fr-CA/build/core-features/common/game-streaming/game-streaming-android-content-test-application) :

Cliquez sur votre profil :

<img src="https://mintcdn.com/microsoft-4404708b/yWviP1jMKvfGdjTk/images/gdk/features/common/game-streaming-android-cta-hc-mode-nav-1.webp?fit=max&auto=format&n=yWviP1jMKvfGdjTk&q=85&s=ee6126012d36fc806b744660f76bc13e" alt="Activation du mode de contraste élevé dans la CTA Android, étape 1" width="890" height="1636" data-path="images/gdk/features/common/game-streaming-android-cta-hc-mode-nav-1.webp" />

Cochez « Enable high contrast mode » :

<img src="https://mintcdn.com/microsoft-4404708b/sIrPFR_ir_sNKVEv/images/gdk/features/common/game-streaming-android-cta-hc-mode-nav-2.png?fit=max&auto=format&n=sIrPFR_ir_sNKVEv&q=85&s=4a073e2ed2c6ed6350486c806c073f95" alt="Activation du mode de contraste élevé dans la CTA Android, étape 2" width="850" height="438" data-path="images/gdk/features/common/game-streaming-android-cta-hc-mode-nav-2.png" />

<a id="windows-cta" />

### CTA Windows (déconseillée)

Pour activer le mode de contraste élevé dans la [CTA Windows](/fr-CA/build/core-features/common/game-streaming/game-streaming-windows-pc-content-test-application) :

Cliquez sur votre profil :

<img src="https://mintcdn.com/microsoft-4404708b/nTPVBuko1tKGsd6P/images/gdk/features/common/game-streaming-windows-cta-hc-mode-nav-1.webp?fit=max&auto=format&n=nTPVBuko1tKGsd6P&q=85&s=1184e43b4f3e10b02bf0f502ef4209d0" alt="Activation du mode de contraste élevé dans la CTA Windows, étape 1" width="1687" height="1102" data-path="images/gdk/features/common/game-streaming-windows-cta-hc-mode-nav-1.webp" />

Cochez « Enable high contrast mode » :

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-windows-cta-hc-mode-nav-2.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=85b59da344732d48b1f82d5282811d63" alt="Activation du mode de contraste élevé dans la CTA Windows, étape 2" width="526" height="379" data-path="images/gdk/features/common/game-streaming-windows-cta-hc-mode-nav-2.png" />


## Related topics

- [XHighContrastMode](/fr-CA/reference/system/xaccessibility/enums/xhighcontrastmode.md)
- [XAG 102 : Contraste](/fr-CA/build/game-principles/accessibility/xag-deep-dives/xag-102-contrast.md)
- [XHighContrastGetMode](/fr-CA/reference/system/xaccessibility/functions/xhighcontrastgetmode.md)
- [Créer des dispositions de contrôles tactiles pour la diffusion de jeux en continu XBOX](/fr-CA/build/core-features/common/game-streaming/building-touch-layouts/index.md)
- [Métadonnées d'accessibilité](/fr-CA/publishing/game-publishing/concepts/metadata-accessibility.md)
