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

# XAG 102：對比

> 讓文字、HUD 與遊戲元素相對於背景達到最低對比度，使低視能玩家能夠辨識這些元素。

## 目標

在視覺元素與其背景之間提供足夠的對比，讓低視能玩家能夠辨識這些元素。

## 概觀

大約有 **29 億人**有低視能。預設的 UI 常常在前景與背景之間缺乏足夠的對比，使低視能或色覺缺陷的玩家無法察覺與使用這些元素。因為對比不足而看不到小地圖、HUD 量表或瞄準準星，就等於失去遊戲本身。

**對比度**是比較前景元素與其背景的亮度。比例越高越容易看見，但有些認知障礙玩家會覺得極高對比的 UI 更難閱讀，因此目標是提供**可設定**的對比。

## 範圍問題

下列項目相對於其背景是否清晰可見？

* 功能表 UI 中的文字
* HUD 元素 (生命值、文字、小地圖)
* 關鍵遊戲元素 (在各種遊戲背景上的瞄準圖示)

## 對比的重要位置

### 文字

如需了解文字在遊戲中出現的位置，請參閱 [XAG 101：文字顯示](/zh-TW/build/game-principles/accessibility/xag-deep-dives/xag-101-text-display)。下列所有項目都需要檢查對比：

* 功能表 UI 文字
* 遊戲進行中的文字
* 派對聊天輸入、預留位置與訊息
* 字幕與隱藏式字幕
* 載入畫面提示
* 錯誤、快顯通知與通知文字

### 非文字視覺元素

* 方向性傷害指示器與瞄準準星
* HUD 元素 (生命值、小地圖、任務標記)
* 按鈕、滑桿及其他控制項
* 符號與字符
* 角色與平台外框
* 包含關鍵資訊的圖片

<Warning>
  紅色與綠色搭配使用時，常會讓具有常見色盲的玩家無法辨識。請同時搭配形狀 / 文字與色彩，請參閱 [XAG 103](/zh-TW/build/game-principles/accessibility/xag-deep-dives/xag-103-additional-cues)。
</Warning>

## 如何測量對比

使用：

* [Accessibility Insights for Windows](https://accessibilityinsights.io/)
* [Colour Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/)
* [Color Oracle 模擬器](https://colororacle.org/)
* [對比度計算機](https://contrast-ratio.com/)

## 改善對比的一般方法

* 允許玩家在螢幕文字後方加上**純色背景**，並調整其不透明度。
* 為螢幕文字與 HUD 元素提供色彩選項。
* 支援**高對比模式**。
* 在文字與角色周圍加上框線 / 外框。

## 實作指南

### 最低對比度

| 元素 | 比例 |
| - | - |
| 標準大小的文字或視覺元素 | **4.5:1** |
| 大型文字與視覺元素 | **3:1** |
| 非作用中 / 停用元素上的文字 | **3:1** |
| 高對比模式 (所有 UI 元素) | **7:1** |
| 預留位置或輸入欄位文字 | **4.5:1** (大型為 3:1) |

### 何謂「大型」

| 平台 | 解析度 / DPI | 大型文字 |
| - | - | - |
| **主機** | 1080p | 52 px |
| **主機** | 4K | 104 px |
| **PC / VR** | 1080p | 36 px |
| **PC / VR** | 4K | 72 px |
| **行動裝置 / XBOX Game Streaming** | 100 DPI | 36 px |
| **行動裝置 / XBOX Game Streaming** | 200 DPI | 72 px |
| **行動裝置 / XBOX Game Streaming** | 400 DPI | 144 px |

請隨 DPI 增加而線性縮放。

### 其他規則

* \*\*高對比模式。\*\*提供淺色及/或深色高對比模式。啟用時，所有 UI 元素相對於背景的對比為 **≥ 7:1**。高對比模式應該：
  * 提高重要元素的可見度
  * 增加不同重要元素之間的視覺區隔
  * 增加重要與不重要元素之間的視覺區隔
* **非純色背景。**以非純色背景中**對比最低**的部分來測量文字對比。
* \*\*遵循系統設定。\*\*若可用，請在啟動時讀取平台提供的對比設定，並據此調整遊戲 UI。
* \*\*玩家設定的色彩。\*\*玩家可以設定文字的前景色與背景色。
* \*\*不要只依賴色彩。\*\*當必須使用色彩傳達資訊時，請為關鍵遊戲元素提供玩家可選擇的色彩。
* \*\*圖片不應包含文字。\*\*標誌字除外，文字必須是獨立的 UI 元素，可設定樣式並可由螢幕助讀程式讀取。
* **標誌字**沒有最低對比要求。
* **純裝飾性**元素沒有對比要求。
* **非作用中元素的文字**仍須符合 3:1 的最低要求 (例如鎖定的「僅限套組」重疊顯示、停用的選項)。

## 對玩家的潛在影響

| 玩家 | 受影響 |
| - | :-: |
| 低視能玩家 | ✔ |
| 色彩感知能力低或無色彩感知能力的玩家 | ✔ |
| 無聽力的玩家 | ✔ |
| 聽力受限的玩家 | ✔ |
| 有認知或學習障礙的玩家 | ✔ |
| 使用小型 / 遠距離 / 有眩光 / 低對比顯示器的玩家 | ✔ |

## 資源

* [Provide high contrast between text/UI and background](http://gameaccessibilityguidelines.com/provide-high-contrast-between-text-and-background/)
* [Provide an option to adjust contrast](http://gameaccessibilityguidelines.com/provide-an-option-to-adjust-contrast)
* [Provide a choice of text colour, low/high contrast choice as a minimum](http://gameaccessibilityguidelines.com/provide-a-choice-of-text-colour-lowhigh-contrast-choice-as-a-minimum)
* [Accessibility Insights For Windows](https://accessibilityinsights.io/)
* [Colour Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/)
* [Color Oracle](https://colororacle.org/)
* [Contrast ratio tool](https://contrast-ratio.com/)
* API：[XHighContrastGetMode](https://developer.microsoft.com/games/xbox/docs/gdk/XHighContrastGetMode) *(NDA)*


## Related topics

- [XAG 102: Contrast](/build/game-principles/accessibility/xag-deep-dives/xag-102-contrast.md)
- [XAG 102: 대비](/ko/build/game-principles/accessibility/xag-deep-dives/xag-102-contrast.md)
- [XAG 102: Contraste](/es/build/game-principles/accessibility/xag-deep-dives/xag-102-contrast.md)
- [XAG 102：对比度](/zh-CN/build/game-principles/accessibility/xag-deep-dives/xag-102-contrast.md)
- [XAG 102: コントラスト](/ja-jp/build/game-principles/accessibility/xag-deep-dives/xag-102-contrast.md)