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

# ハイ コントラスト モード

> ハイ コントラスト モード

タイトルの配色によっては、下地となるストリームで実行中のタイトルとのコントラストが不十分なためにタッチ レイアウトが見づらい場合があります。これは、視力が低い、色覚異常、またはその他の視覚障害のあるゲーマーにとって特に問題となる可能性があります。ハイ コントラスト モードは、有効にすると、[アイコン](/reference/system/touchadaptationkit/types/game-streaming-touch-icon) でスタイル指定されたボタンに追加のストロークとボタン バックプレートを追加し、コントラストを高めるために [システム カラー](/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette#system-colors) を変更するクライアント設定です。

たとえば、標準のレイアウトと明るい単色の背景色で、ハイ コントラスト モードが **無効** の場合:

<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="ハイ コントラスト モードが無効の Standard タッチ レイアウト" width="1748" height="732" data-path="images/gdk/features/common/game-streaming-tak-standard-layout-hc-disabled.png" />

そして、同じセットアップでハイ コントラスト モードが **有効** の場合:

<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="ハイ コントラスト モードが有効の Standard タッチ レイアウト" width="1720" height="720" data-path="images/gdk/features/common/game-streaming-tak-standard-layout-hc-enabled.png" />

ハイ コントラスト モードのスタイル指定にはシステムの既定値に依存できますが、[カスタム アセット用のハイ コントラスト モード バリアント](#custom-assets-for-high-contrast-mode) を含めたり、ゲームのビジュアル的な美しさに合わせるために [システム カラーをオーバーライド](#overriding-system-colors-for-high-contrast-mode) することもできます。

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

## ハイ コントラスト モード用のカスタム アセット

タッチ適応バンドルで [カスタム アセット](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets) を使用する場合、各標準コントラスト アセットに対してハイ コントラスト アセット バリアントを含めることができます。これらのハイ コントラスト アセット バリアントは、ハイ コントラスト モードが有効なときにレンダリングされます。アセットは、アセット名の後にファイル拡張子の前に `.hc` サフィックスを含めることで、ハイ コントラスト バリアントとしてマークされます。たとえば、`myAsset.png` (左) とそのハイ コントラスト バリアント `myAsset.hc.png` (右) を考えます。

<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="カスタム アセットとハイ コントラスト カスタム アセット バリアントの並列比較" width="500" height="240" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-asset-compare.png" />

ディスク上でアセットを配置する際、標準コントラストとハイ コントラストの両方のアセットが通常どおり [言語およびアセット スケールによって編成](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets#asset-files) されます。上記のアセットのファイル構造は次のようになるかもしれません:

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

レイアウト内で、アセットは [ファイル名拡張子なし](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-custom-assets#referencing-assets-from-layouts) **かつ `.hc` サフィックスなし** で参照されます。たとえば、上記のアセットでスタイル指定されたボタンは次のように構成されます。

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

このスタイルが与えられると、タッチ適応キットは、ハイ コントラスト モードが無効か有効かに応じて、`myAsset.png` または `myAsset.hc.png` を自動的に選択します。このスタイル指定は、ハイ コントラスト モードが **無効** の場合、次の結果になります。

<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="カスタム アセット付きでハイ コントラスト モードが無効のタッチ レイアウト" width="158" height="146" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-asset-hc-disabled.png" />

そして、ハイ コントラスト モードが **有効** の場合、次の結果になります。

<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="カスタム アセット付きでハイ コントラスト モードが有効のタッチ レイアウト" 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" />

## ハイ コントラスト モード用のシステム カラーのオーバーライド

タッチ レイアウト内または [コンテキスト ファイル](/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-bundle#context) 内の [カラー パレット](/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette) を使用して、[システム カラー](/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette#system-colors) をオーバーライドできます。コントロールはスタイル指定時に暗黙的にシステム カラーをサンプリングします。つまり、任意のオーバーライドは、すべてのコントロールのグローバル スタイルに影響します (コントロールがカスタム `styles` ブロック内に独自のオーバーライドを持たない限り)。

たとえば、次のレイアウトは、ハイ コントラスト モードが有効なときにカスタム スタイルを実現するためにいくつかのシステム カラーをオーバーライドします。

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

```

上記のレイアウトでは、`highContrast` ブロック内で 3 つの色のオーバーライドが宣言されており、ハイ コントラスト モードが有効な場合にのみ適用されます。

1. `system_contentPrimary` は、ジョイスティックの中央のストロークとマップ アイコンの色合いに適用されるスタイルをオーバーライドします。
2. `system_contentSecondary` は、ジョイスティックの塗りつぶしに適用されるスタイルをオーバーライドします。
3. `system_contrastPrimary` は、ジョイスティックの外側のストロークとボタン バックプレートに適用されるスタイルをオーバーライドします。

ハイ コントラスト モードが **無効** の上記のレイアウト:

<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="システム カラー オーバーライド付きでハイ コントラスト モードが無効のタッチ レイアウト" width="1060" height="456" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-color-palette-hc-disabled.png" />

そして、ハイ コントラスト モードが **有効** の場合:

<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="システム カラー オーバーライド付きでハイ コントラスト モードが有効のタッチ レイアウト" width="1066" height="456" data-path="images/gdk/features/common/game-streaming-tak-hc-mode-color-palette-hc-enabled.png" />

## ハイ コントラスト モードの有効化

[Web](#web-cta)、[Android](#android-cta)、または [Windows](#windows-cta) の Content Test Application (CTA) のいずれでもハイ コントラスト モードをテストできます。

<a id="web-cta" />

### Web CTA

[Web CTA](/build/core-features/common/game-streaming/game-streaming-web-content-test-application) でハイ コントラスト モードを有効にするには、以下の手順を行います:

プロファイルをクリックし、\[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="Web CTA でハイ コントラスト モードを有効にする手順 1" width="763" height="1024" data-path="images/gdk/features/common/game-streaming-web-cta-hc-mode-nav-1.png" />

\[Accessibility] に移動し、\[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="Web CTA でハイ コントラスト モードを有効にする手順 2" width="1742" height="910" data-path="images/gdk/features/common/game-streaming-web-cta-hc-mode-nav-2.png" />

<a id="android-cta" />

### Android CTA (非推奨)

[Android CTA](/build/core-features/common/game-streaming/game-streaming-android-content-test-application) でハイ コントラスト モードを有効にするには、以下の手順を行います:

プロファイルをクリックします。

<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="Android CTA でハイ コントラスト モードを有効にする手順 1" width="890" height="1636" data-path="images/gdk/features/common/game-streaming-android-cta-hc-mode-nav-1.webp" />

\[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="Android CTA でハイ コントラスト モードを有効にする手順 2" width="850" height="438" data-path="images/gdk/features/common/game-streaming-android-cta-hc-mode-nav-2.png" />

<a id="windows-cta" />

### Windows CTA (非推奨)

[Windows CTA](/build/core-features/common/game-streaming/game-streaming-windows-pc-content-test-application) でハイ コントラスト モードを有効にするには、以下の手順を行います:

プロファイルをクリックします。

<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="Windows CTA でハイ コントラスト モードを有効にする手順 1" width="1687" height="1102" data-path="images/gdk/features/common/game-streaming-windows-cta-hc-mode-nav-1.webp" />

\[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="Windows CTA でハイ コントラスト モードを有効にする手順 2" width="526" height="379" data-path="images/gdk/features/common/game-streaming-windows-cta-hc-mode-nav-2.png" />
