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

# 高對比模式

> 高對比模式

視遊戲的色彩配置而定，有時觸控配置可能因為與底層串流中執行的遊戲對比不佳而難以辨識。對於低視能、色盲或有其他視覺障礙的玩家來說，這個問題可能特別嚴重。高對比模式是一項用戶端設定，啟用後會為使用[圖示](/zh-TW/reference/system/touchadaptationkit/types/game-streaming-touch-icon)設定樣式的按鈕加上額外的筆觸和按鈕背板，並修改[系統色彩](/zh-TW/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="停用高對比模式的標準觸控配置" 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="啟用高對比模式的標準觸控配置" 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" />

## 高對比模式的自訂資產

在觸控調整套件組合中使用[自訂資產](/zh-TW/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" />

在磁碟上配置資產時，標準對比和高對比資產都會照常[依語言和資產縮放比例組織](/zh-TW/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
```

在配置中，參考資產時[不包含副檔名](/zh-TW/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" />

## 覆寫高對比模式的系統色彩

觸控配置或[內容檔案](/zh-TW/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-bundle#context)中的[調色盤](/zh-TW/reference/system/touchadaptationkit/layout/game-streaming-touch-color-palette)可用來覆寫[系統色彩](/zh-TW/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` 區塊宣告了三個色彩覆寫，這些覆寫只會在啟用高對比模式時套用：

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) 內容測試應用程式 (CTA) 上測試高對比模式。

<a id="web-cta" />

### Web CTA

若要在 [Web CTA](/zh-TW/build/core-features/common/game-streaming/game-streaming-web-content-test-application) 上啟用高對比模式：

按一下您的設定檔，然後瀏覽至 \[設定] 視窗：

<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" />

瀏覽至 \[協助工具]，然後勾選 \[在遊戲中啟用高對比]：

<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](/zh-TW/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" />

勾選 \[啟用高對比模式]：

<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](/zh-TW/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" />

勾選 \[啟用高對比模式]：

<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" />


## Related topics

- [GDK 無障礙概覽](/zh-TW/build/game-principles/accessibility/accessibility-overview.md)
- [XBOX Accessibility Guidelines (XAG)](/zh-TW/build/game-principles/accessibility/xbox-accessibility-guidelines.md)
- [無障礙功能標籤](/zh-TW/build/game-principles/accessibility/accessibility-feature-tags.md)
- [开发模式](/zh-CN/services/playfab/pricing/development-mode.md)
- [高对比度模式](/zh-CN/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-high-contrast-mode.md)
