> ## 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.

# Modo de contraste alto

> Modo de contraste alto

Dependiendo de la combinación de colores de su título, puede haber casos en los que los diseños táctiles sean difíciles de ver porque contrastan mal con el título que se ejecuta en la transmisión subyacente. Esto puede ser especialmente problemático para los jugadores con baja visión, daltonismo u otras discapacidades visuales. El modo de contraste alto es una configuración del cliente que, cuando se activa, agrega trazos adicionales y placas de fondo a los botones con estilo de [icono](/reference/system/touchadaptationkit/types/game-streaming-touch-icon), además de modificar los [colores del sistema](/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette#system-colors) para aumentar el contraste.

Por ejemplo, el diseño estándar y un color de fondo claro sólido, con el modo de contraste alto **deshabilitado**:

<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="Diseño táctil estándar con el modo de contraste alto deshabilitado" width="1748" height="732" data-path="images/gdk/features/common/game-streaming-tak-standard-layout-hc-disabled.png" />

Y aquí está la misma configuración con el modo de contraste alto **habilitado**:

<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="Diseño táctil estándar con el modo de contraste alto habilitado" width="1720" height="720" data-path="images/gdk/features/common/game-streaming-tak-standard-layout-hc-enabled.png" />

Aunque puede confiar en los valores predeterminados del sistema para el estilo del modo de contraste alto, también puede incluir [variantes de contraste alto para sus recursos personalizados](#custom-assets-for-high-contrast-mode), así como [reemplazar los colores del sistema](#overriding-system-colors-for-high-contrast-mode) para que coincidan con la estética visual de su juego.

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

## Recursos personalizados para el modo de contraste alto

Al usar [recursos personalizados](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets) en el paquete de adaptación táctil, puede incluir variantes de recursos de contraste alto para cada uno de sus recursos de contraste estándar. Estas variantes de recursos de contraste alto se representan siempre que el modo de contraste alto está habilitado. Los recursos se marcan como una variante de contraste alto incluyendo un sufijo `.hc` después del nombre del recurso y antes de la extensión de archivo. Por ejemplo, considere `myAsset.png` (izquierda) y su variante de contraste alto, `myAsset.hc.png` (derecha):

<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="Comparación lado a lado de un recurso personalizado y su variante de recurso personalizado de contraste alto" width="500" height="240" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-asset-compare.png" />

Al organizar los recursos en el disco, tanto los recursos de contraste estándar como los de contraste alto se [organizan por idioma y escala de recurso](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets#asset-files) de la manera habitual. Para los recursos anteriores, la estructura de archivos podría verse así:

```
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
```

Dentro de un diseño, se hace referencia a los recursos [sin la extensión de nombre de archivo](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets#referencing-assets-from-layouts) **y sin el sufijo `.hc`**. Por ejemplo, un botón con estilo que use los recursos anteriores podría configurarse así:

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

Con este estilo, el kit de adaptación táctil seleccionará automáticamente `myAsset.png` o `myAsset.hc.png` dependiendo de si el modo de contraste alto está deshabilitado o habilitado, respectivamente. Este estilo producirá lo siguiente cuando el modo de contraste alto esté **deshabilitado**:

<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="Diseño táctil con recursos personalizados y el modo de contraste alto deshabilitado" width="158" height="146" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-asset-hc-disabled.png" />

Y lo siguiente cuando el modo de contraste alto esté **habilitado**:

<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="Diseño táctil con recursos personalizados y el modo de contraste alto habilitado" 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" />

## Reemplazo de los colores del sistema para el modo de contraste alto

Las [paletas de colores](/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette) dentro de los diseños táctiles o del [archivo de contexto](/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-bundle#context) se pueden usar para reemplazar los [colores del sistema](/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette#system-colors). Los controles muestrean implícitamente los colores del sistema al aplicar estilos, lo que significa que cualquier reemplazo afectará al estilo global de todos los controles (a menos que un control tenga su propio reemplazo dentro de un bloque `styles` personalizado).

Por ejemplo, el siguiente diseño reemplaza algunos de los colores del sistema para lograr un estilo personalizado cuando el modo de contraste alto está habilitado:

```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"
        }
      ]
    }
  }
}

```

En el diseño anterior, se declaran tres reemplazos de color en el bloque `highContrast` que solo se aplicarán cuando el modo de contraste alto esté habilitado:

1. `system_contentPrimary` reemplazará el estilo aplicado al trazo intermedio del joystick y al matiz del icono del mapa.
2. `system_contentSecondary` reemplazará el estilo aplicado al relleno del joystick.
3. `system_contrastPrimary` reemplazará el estilo aplicado al trazo exterior del joystick y a las placas de fondo de los botones.

El diseño anterior con el modo de contraste alto **deshabilitado**:

<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="Diseño táctil con reemplazos de colores del sistema y el modo de contraste alto deshabilitado" width="1060" height="456" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-color-palette-hc-disabled.png" />

Y con el modo de contraste alto **habilitado**:

<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="Diseño táctil con reemplazos de colores del sistema y el modo de contraste alto habilitado" width="1066" height="456" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-color-palette-hc-enabled.png" />

## Habilitación del modo de contraste alto

Puede probar el modo de contraste alto en cualquiera de las aplicaciones de prueba de contenido (CTA) [web](#web-cta), [android](#android-cta) o [windows](#windows-cta).

<a id="web-cta" />

### CTA web

El modo de contraste alto se puede habilitar en la [CTA web](/build/core-features/common/game-streaming/game-streaming-web-content-test-application) de la siguiente manera:

Haga clic en su perfil y navegue hasta la ventana "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="Habilitación del modo de contraste alto en la CTA web, paso 1" width="763" height="1024" data-path="images/gdk/features/common/game-streaming-web-cta-hc-mode-nav-1.png" />

Navegue hasta "Accessibility" y active "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="Habilitación del modo de contraste alto en la CTA web, paso 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 de Android (en desuso)

El modo de contraste alto se puede habilitar en la [CTA de Android](/build/core-features/common/game-streaming/game-streaming-android-content-test-application) de la siguiente manera:

Haga clic en su perfil:

<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="Habilitación del modo de contraste alto en la CTA de Android, paso 1" width="890" height="1636" data-path="images/gdk/features/common/game-streaming-android-cta-hc-mode-nav-1.webp" />

Active "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="Habilitación del modo de contraste alto en la CTA de Android, paso 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 de Windows (en desuso)

El modo de contraste alto se puede habilitar en la [CTA de Windows](/build/core-features/common/game-streaming/game-streaming-windows-pc-content-test-application) de la siguiente manera:

Haga clic en su perfil:

<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="Habilitación del modo de contraste alto en la CTA de Windows, paso 1" width="1687" height="1102" data-path="images/gdk/features/common/game-streaming-windows-cta-hc-mode-nav-1.webp" />

Active "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="Habilitación del modo de contraste alto en la CTA de Windows, paso 2" width="526" height="379" data-path="images/gdk/features/common/game-streaming-windows-cta-hc-mode-nav-2.png" />
