> ## 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: テキスト表示](/build/game-principles/accessibility/xag-deep-dives/xag-101-text-display) を参照してください。以下のすべてについてコントラストを確認する必要があります。

* メニュー UI のテキスト
* アクティブなゲームプレイ中のテキスト
* パーティ チャットの入力、プレースホルダー、およびメッセージ
* 字幕とキャプション
* ロード画面のヒント
* エラー、トースト、通知テキスト

### 非テキストの視覚要素

* 方向を示すダメージ インジケーターおよび照準レティクル
* HUD 要素 (体力、ミニマップ、クエスト マーカー)
* ボタン、スライダー、その他のコントロール
* シンボルとグリフ
* キャラクターとプラットフォームのアウトライン
* 重要な情報を含む画像

<Warning>
  赤と緑の組み合わせは、一般的な色覚異常を持つプレイヤーには機能しないことがよくあります。色と形状 / テキストを組み合わせて使用してください。[XAG 103](/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 simulator](https://colororacle.org/)
* [Contrast-ratio calculator](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 の最小値を満たす必要があります (例: ロックされた「Bundle only」オーバーレイ、無効化されたオプション)。

## プレイヤーへの潜在的な影響

| プレイヤー                                       | 影響あり |
| ------------------------------------------- | :--: |
| 弱視のプレイヤー                                    |   ✔  |
| 色覚がほとんど、またはないプレイヤー                          |   ✔  |
| 聴覚のないプレイヤー                                  |   ✔  |
| 聴覚が限定的なプレイヤー                                |   ✔  |
| 認知障害または学習障害のあるプレイヤー                         |   ✔  |
| 小さい / 遠い / 反射の影響を受ける / 低コントラストのディスプレイのプレイヤー |   ✔  |

## リソース

* [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 101: テキスト表示](/ja-jp/build/game-principles/accessibility/xag-deep-dives/xag-101-text-display.md)
- [XAG 123: メンタル ヘルスのベスト プラクティス](/ja-jp/build/game-principles/accessibility/xag-deep-dives/xag-123-mental-health-best-practices.md)
- [アクセシビリティメタデータ](/ja-jp/publishing/game-publishing/concepts/metadata-accessibility.md)
- [ハイ コントラスト モード](/ja-jp/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-high-contrast-mode.md)
- [XBOX Accessibility Guidelines (XAG)](/ja-jp/build/game-principles/accessibility/xbox-accessibility-guidelines.md)