> ## 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 alto contraste
> Modo de alto contraste
Dependendo do esquema de cores do seu título, pode haver casos em que seus layouts de toque sejam difíceis de ver porque contrastam pouco com o título em execução no stream subjacente. Isso pode ser especialmente problemático para jogadores com baixa visão, daltonismo ou outras deficiências visuais. O modo de alto contraste é uma configuração do cliente que, quando ativada, adiciona contornos adicionais e placas de fundo aos botões estilizados com um [ícone](/pt-BR/reference/system/touchadaptationkit/types/game-streaming-touch-icon), além de modificar as [cores do sistema](/pt-BR/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette#system-colors) para aumentar o contraste.
Por exemplo, o layout padrão e uma cor de fundo clara sólida, com o modo de alto contraste **desabilitado**:
E aqui está a mesma configuração com o modo de alto contraste **habilitado**:
Embora você possa contar com os padrões do sistema para o estilo do modo de alto contraste, também pode incluir [variantes de alto contraste para seus ativos personalizados](#custom-assets-for-high-contrast-mode), bem como [substituir as cores do sistema](#overriding-system-colors-for-high-contrast-mode) para combinar com a estética visual do seu jogo.
## Ativos personalizados para o modo de alto contraste
Ao usar [ativos personalizados](/pt-BR/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets) no seu touch adaptation bundle, você pode incluir variantes de ativos de alto contraste para cada um dos seus ativos de contraste padrão. Essas variantes de ativos de alto contraste são renderizadas sempre que o modo de alto contraste está habilitado. Os ativos são marcados como variante de alto contraste incluindo um sufixo `.hc` após o nome do ativo e antes da extensão do arquivo. Por exemplo, considere `myAsset.png` (à esquerda) e sua variante de alto contraste, `myAsset.hc.png` (à direita):
Ao organizar seus ativos no disco, tanto os ativos de contraste padrão quanto os de alto contraste são [organizados por idioma e escala de ativo](/pt-BR/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets#asset-files) normalmente. Para os ativos acima, a estrutura de arquivos pode ser parecida com esta:
```
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 um layout, os ativos são referenciados [sem a extensão do nome de arquivo](/pt-BR/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets#referencing-assets-from-layouts) **e sem o sufixo `.hc`**. Por exemplo, um botão estilizado com os ativos acima pode ser configurado assim:
```JSON theme={null}
{
"type": "button",
"action": "gamepadA",
"styles": {
"idle": {
"faceImage": {
"type": "asset",
"value": "myAsset"
}
}
}
}
```
Com esse estilo, o touch adaptation kit selecionará automaticamente `myAsset.png` ou `myAsset.hc.png`, dependendo de o modo de alto contraste estar desabilitado ou habilitado, respectivamente. Esse estilo produzirá o seguinte quando o modo de alto contraste estiver **desabilitado**:
E o seguinte quando o modo de alto contraste estiver **habilitado**:
## Substituir as cores do sistema para o modo de alto contraste
As [paletas de cores](/pt-BR/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette) nos seus layouts de toque ou no [arquivo de contexto](/pt-BR/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-bundle#context) podem ser usadas para substituir as [cores do sistema](/pt-BR/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette#system-colors). Os controles usam implicitamente as cores do sistema ao aplicar estilos, o que significa que quaisquer substituições afetarão o estilo global de todos os controles (a menos que um controle tenha sua própria substituição em um bloco `styles` personalizado).
Por exemplo, o layout a seguir substitui algumas das cores do sistema para obter um estilo personalizado quando o modo de alto contraste 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"
}
]
}
}
}
```
No layout acima, três substituições de cores são declaradas no bloco `highContrast` e só serão aplicadas quando o modo de alto contraste estiver habilitado:
1. `system_contentPrimary` substituirá o estilo aplicado ao contorno intermediário do joystick e à tonalidade do ícone de mapa.
2. `system_contentSecondary` substituirá o estilo aplicado ao preenchimento do joystick.
3. `system_contrastPrimary` substituirá o estilo aplicado ao contorno externo do joystick e às placas de fundo dos botões.
O layout acima com o modo de alto contraste **desabilitado**:
E com o modo de alto contraste **habilitado**:
## Habilitar o modo de alto contraste
Você pode testar o modo de alto contraste em qualquer um dos aplicativos de teste de conteúdo (CTA) para [web](#web-cta), [Android](#android-cta) ou [Windows](#windows-cta).
### CTA para web
O modo de alto contraste pode ser habilitado no [CTA para web](/pt-BR/build/core-features/common/game-streaming/game-streaming-web-content-test-application) da seguinte maneira:
Clique no seu perfil e navegue até a janela "Settings":
Navegue até "Accessibility" e marque "Enable high contrast in-game":
### CTA para Android (preterido)
O modo de alto contraste pode ser habilitado no [CTA para Android](/pt-BR/build/core-features/common/game-streaming/game-streaming-android-content-test-application) da seguinte maneira:
Clique no seu perfil:
Marque "Enable high contrast mode":
### CTA para Windows (preterido)
O modo de alto contraste pode ser habilitado no [CTA para Windows](/pt-BR/build/core-features/common/game-streaming/game-streaming-windows-pc-content-test-application) da seguinte maneira:
Clique no seu perfil:
Marque "Enable high contrast mode":
## Related topics
- [XAG 102: Contraste](/pt-BR/build/game-principles/accessibility/xag-deep-dives/xag-102-contrast.md)
- [XHighContrastMode](/pt-BR/reference/system/xaccessibility/enums/xhighcontrastmode.md)
- [XHighContrastGetMode](/pt-BR/reference/system/xaccessibility/functions/xhighcontrastgetmode.md)
- [Visão geral de acessibilidade no GDK](/pt-BR/build/game-principles/accessibility/accessibility-overview.md)
- [Metadados de acessibilidade](/pt-BR/publishing/game-publishing/concepts/metadata-accessibility.md)