Xbox アクセシビリティ ガイドライン 102: コントラスト

目標

この Xbox アクセシビリティ ガイド ライン (XAG) の目標は、視覚要素とその背景の間に十分なコントラストを提供して、これらの要素を弱視のゲーマーが解釈できるようにすることです。

概要

世界には弱視の人が約 29 億人います。 ゲームの既定設定では、多くの場合、背景に対して強いコントラストがない UI 要素が生成され、弱視のプレイヤーや色覚特性があるプレイヤーがこれらの要素を認識して使用することが困難になります。

コントラスト比は、要素の前景と背景の間の輝度値の差です。 コントラスト設定のサポートは、障碍を持つゲーマーが背景に対して画面上の要素の視認性を高めるためのツールとして使用できます。 通常、コントラスト比が「強い」ほど、要素の視認性が高くなります。 コントラストと視認性が低いためにプレーヤーが視覚要素を認識できない場合、その要素を理解または使用する能力を必要とするゲームプレイの側面から除外される可能性があります。 これにより、最終的にゲームプレイから完全に除外される可能性があります。 たとえば、ゲームプレイに不可欠な情報を提供するが、その要素とその背景の間にプレイヤーが視認できるほど強いコントラストがない画面上のミニマップについて考えてみます。 彼らは今、次の目的にナビゲートしたり、敵やチェック ポイントが存在する場所を特定したり、ミニマップによって通知される他の重要なタスクを実行したりできない可能性があります。

範囲を絞るための質問

ゲームの重要な視覚要素は、背景に対して視認可能ですか?

  • メニュー UI のテキストとその背景色はいかがですか?

  • ヘッド アップ ディスプレイ (HUD) 要素の背景に対する色 (ヘルス メーター、テキスト、ミニマップ要素など) はいかがですか?

  • 背景に対する主要なゲームプレイ要素 (たとえば、ターゲティング アイコンは灰色であり、一般的に暗いゲーム環境の背景に対して識別される必要があります) はいかがですか?

背景情報と基本情報

コントラストと視覚

視覚要素とその背景の間に強いコントラスト比を維持すると、弱視のプレイヤーにとってこれらの要素の視認性が向上します。 こちらは補足のために準備した、テキストの色と背景との間のコントラスト比の例です。 さらに、この例は、プレイヤーが鮮明さに影響を与えるタイプの弱視であったり、直射日光の当たる場所や離れた場所でプレイするなどの状況的な障害がある場合、コントラスト比の低いテキストが読みにくくなる可能性があることをシミュレーションしています。 シャープネスが低下すると、コントラスト比が強いテキストは、コントラスト比が弱いテキストよりもはるかに見やすくなることに注意してください。

2 列のテキストのコントラスト比の例。 左側の列には「テキストのコントラスト比の例」というラベルが付いています。 その下には、そのボックスのテキストのコントラスト比を説明するテキストが入ったさまざまな色のボックスがあります。コントラスト比は 1.2:1 から 21:1 までです。 右側の列には、シャープネスが 74% 低下したサンプル テキストとラベルが付けられています。 ラベルの下には左の列と同じボックスがありますが、ぼやけていてもコントラストの高いテキストの方が読みやすいことを示すために、よりぼやけています。

また、文字を読むことが困難などの認知障碍のあるプレイヤーは、ハイ コントラストのユーザー インターフェイスのテキストを認識しにくい場合があることに注意することも重要です。 ハイ コントラストのエクスペリエンスは少なくともサポートする必要がありますが、構成可能なコントラストのオプションは、より多くのゲーマーのニーズを満たすことに役立ちます。

アクセシビリティ対応のコントラスト比が重要な領域

テキストと視覚要素が、ゲーム エクスペリエンスのすべてのコンテキストを通じて、背景に対して強いコントラスト比を維持するようにすることが重要です。 評価する重要な領域の提案は次のとおりです。

テキスト要素

重要なテキスト要素がゲームで頻繁に見られる場所の詳細な概要については、「XAG 101: テキスト表示」を参照してください。

  • メニュー UI のテキスト

  • アクティブなゲームプレイ中に画面に表示されるテキスト

  • パーティー チャット ウィンドウのテキスト (入力フィールド テキスト、プレースホルダー テキスト、送受信メッセージ テキスト)

  • 字幕とキャプション

  • 貴重な情報を提供するロード画面のテキスト

  • エラー メッセージ、トースト メッセージ、またはその他のタイトル固有の通知に関するテキスト

非テキストの視覚要素

  • 視覚的な合図:

    例 (展開可能)

    ターゲット アイコンのようなゲームプレイの非テキスト視覚要素、またはそれらがどこから撃たれたかに関する方向情報をプレーヤーに中継する「ハロー」効果も、強いコントラストなしでは一般に見るのが難しい分野です。

    攻撃の準備をしている敵に向かってプレイアブル キャラクターから左に向いている、黒い輪郭の白い矢印を示す、Immortals Fenyx Rising のスクリーンショット。

    Fenyx Immortals Rising では、黒い輪郭の白い方向矢印を使用して、この後の攻撃と攻撃がどの方向から来るかをプレイヤーに視覚的に通知します。

    注意

    ターゲット アイコンやその他の重要な要素に赤と緑を使用すると、特定の色覚特性を持つプレイヤーに問題が発生する可能性があります。 色覚特性に対応するアクセシビリティのベスト プラクティスの詳細については、「XAG 103: 視覚的な合図と音声的な合図のための追加チャンネル」を参照してください。

  • ヘルスメーター、方向を示す合図、マップ要素などの画面上の HUD 要素:

    例 (展開可能) ヘルス メーター、ボーナス メーター、画面上の目標も、プレーヤーに重要な情報を提供します。 これらの要素は、コントラストを評価するときにも検討する必要があります。

    ゲーム「アウターワールド」で島を探索するプレイヤー。 体力バー、ナビゲーション バー、クエスト目標、字幕はすべて、暗い背景に対して強いコントラストを持っているため、プレイヤーにとってより見やすくなっています。

    The Outer Worlds では、明るい赤と紫のメーターの周りの白い輪郭と、HUD 要素の不透明な背景に対する明るい黄色のテキストが視認性を高めています。

  • ボタン、スライダー、およびその他のコントロール:

    例 (展開可能) 多くのゲームには、プレーヤーを支援するために画面の周辺にミニマップがあります。 これらのマップの要素は、視覚的に区別するのが難しいことが多く、要素とその背景の間の強いコントラスト比の恩恵を受けます。 同様に、サイズに関係なく、ゲームプレイに重要な情報を提供するすべてのマップ、テキスト シンボル、およびマップ画面に表示されるその他の要素も強いコントラストを持つ必要があります。

    Forza Horizon 4 ゲームプレイ エリアの地図。 下に「新しい」という単語が付いている小さなアイコンがマップ全体に散在し、プレイヤーが完了できる新しいレースを示します。

    Forza Horizon 4 では、マップ要素の黒いアウトラインと黒いテキストの下に黄色の塗りつぶしがあり、マップの他の部分に対するこれらの要素のコントラストと視認性が向上しています。

  • 記号またはグリフ:

    例 (展開可能) プレーヤーにとって、スライダーやボタンをその背景から明確に区別することが重要です。 スライダータイプの要素は、ボリュームやテキスト スケールの調整などのユーザー補助設定メニューで頻繁に使用されます。

    Minecraft のチャット テキストの不透明度設定スライダー。 スライダーは 79% に設定されています。

    Minecraft では、スライダー タブは明るい灰色で、輪郭は黒で、暗い灰色の背景に表示されます。 白い「チャット テキストの不透明度:79%」のテキストも、スライダーの全体的な背景とスライダー自体の両方に対して高いコントラスト比を維持します。

    Gears Tactics のオーディオ設定。 さまざまな音量コントロール用の 4 つのスライダーがあります。 スライダーを制御するタブは、濃い青の背景に明るい白です。

    Gears Tactics では、円形のスライダー タブは明るく輝く白い円であり、背景の濃い青から黒へのグラデーションに対して高いコントラストを維持します。

    記号、グリフ、または画像が重要な情報をプレーヤーに伝える場合、これらの要素を背景と簡単に区別できることが重要です。

    ゲーム『フォーオナー』でプレイヤーが敵に接近されています。 プレイヤーの頭上には城のシンボルが表示されます。 シンボルには黒い輪郭があり、その輪郭も白で囲まれています。 敵は剣を交差させた赤いシンボルを頭上に持っています。 そのシンボルも黒で輪郭が描かれ、その後白で輪郭が描かれます。

    For Honor のこの例では、チーム シールド内のシンボルが無地の背景に表示されています。 白い輪郭を使えば、シンボルが暗い背景 (暗い壁に対するオレンジ色の剣のシンボルのように) に対して確実に見えるようになり、黒い輪郭を使うと、シンボルが明るい背景 (明るい城の背景に対する青い城のシンボルのように) に対して確実に見えるようになります。

  • キャラクターとプラットフォーム:

    例 (展開可能) キャラクターやその他の重要なゲームプレイ要素の輪郭を描くと、背景に対する要素のコントラスト比を高めるのに役立ちます。 アウトラインに使用される色も構成可能であるか、既定で表示されるすべての背景に対して強いコントラストを提供する必要があります。

    2D プラットフォーマーであるゲーム Eagle Island のレベル。 キャラクターは棚の上に立っています。 誰もいない部屋の真ん中に鳥のような敵が数体浮かんでいます。 プレイヤー、床、天井、敵はすべて白で縁取られているため、黒い背景に対して目立ちます。

    Eagle Island では、プレイヤーは設定メニューで背景を暗くすることを選択できます。 100% に暗くなると、背景は森の設定から黒一色の背景に変わります。 さらに、プレイヤーは「キャラクターの輪郭」と「プラットフォームの輪郭」を作成できます。これにより、これらの要素の周囲に白い輪郭が追加され、コントラストと視認性がさらに向上します。

    ゲーム Eagle Island のアクティブなゲームプレイ キャプチャ。 キャラクターは、木、花、黄色く光るランプのあるカラフルな背景に対して動いています。

    比較のために、この例では、ゲーム Eagle Island が暗色表示されておらず、「キャラクターの輪郭」と「プラットフォームの輪郭」が有効になっていない場合の背景を示しています。

  • 重要な情報を含む画像。

コントラストの測定方法

要素とその背景のコントラストを測定して、コントラスト比が条件を満たしていることを確認するために使用できるツールはたくさんあります。

コントラスト測定ツール:

  1. Windows 向けアクセシビリティ インサイト

  2. Paciello グループによるカラー コントラスト アナライザー

Windows 向けアクセシビリティのインサイトを使用して、フォーオナーの色のコントラスト比をチェックするユーザー .

Windows 向けアクセシビリティ インサイト: コントラスト ビデオの測定

コントラストを改善するための一般的なアプローチ

できるだけ多くのプレイヤーのためにテキストをアクセシビリティ対応にするための最善のアプローチは、ニーズに最適に対応するように UI を構成する選択肢をプレイヤーに提供することです。

多くの場合、ゲームプレイ環境は常に視覚的に変化しており、テキスト、記号、視覚的な合図などの画面要素は、すべてのゲームプレイ シナリオで常にコントラスト比を満たしているわけではありません。

コントラストを上げるのに役立ついくつかの一般的なアプローチを次に示します。

  • 画面上のテキストの後ろに無地の背景を配置するオプションをプレイヤーに提供するか、その背景の不透明度を調整するオプションをプレイヤーに提供します。

  • 画面上のテキストと要素の色オプションをプレイヤーに提供して、プレイヤーが最も見やすい色を選択できるようにします。

  • ゲームのさまざまな側面でハイ コントラスト モードをサポートします。

  • テキストまたは要素の周囲に境界線を追加します。

Minecraft のアクセシビリティ設定メニュー。 テキストの背景の不透明度のスライダーは 100% に設定されています。 [テキストの背景] オプションはチャットに設定されています。 チャット テキストの不透明度スライダーは 79% に設定されています。

テキスト チャットの背景の不透明度ビデオ

Minecraft では、プレイヤーはテキスト チャットの背景の不透明度を調整できます。

異なる色の HUD を使用した Fallout: New Vegas の 3 つのスクリーンショット。 1 つは HUD が黄色の場合です。 2 番目の場合は緑色です。 3 番目は水色です。

Fallout:New Vegas では、HUD の色はプレイヤーが変更できます。

実装ガイドライン

より多くのプレーヤーのアクセシビリティのニーズを満たすために、ゲームがコントラスト設定に最小限の構成可能性を提供することを保証するためのいくつかのガイドラインを次に示します。

注意

コントラスト比を測定するためのツールは、このトピックの前半の「コントラストの測定方法」セクションにあります。

  • 大きなテキストおよび大きなな視覚要素は、背景に対して 3:1 の最小コントラストを満たす必要があります。

    • 本体では、大きなテキストとは以下を意味します。

      • 1080p で 52px

      • 4K で 104px

    • PC/VR では、大きなテキストは次のように定義されます。

      • 1080p で 36px

      • 4K で 72px

    • モバイル/Xbox ゲーム ストリーミングでは、大きなテキストは次のように定義されます。

      • 100 DPI で 36px

      • 200 DPI で 72px

      • 400 DPI で 144px

      • DPI の増加とともに線形的に拡大します

  • ゲームプレイの重要な情報またはコンテキストを提供する標準サイズのテキストおよび視覚要素 (大規模とは見なされないもの) は、背景に対してのコントラスト比が少なくとも 4.5:1 である必要があります。

  • 非アクティブな要素のテキストは、背景に対して 3:1 の最小コントラスト比を満たす必要があります。

    • 非アクティブな要素には、記号内のテキスト、グリフ、または UI に表示されるその他の視覚要素を含めることができますが、次のようなシナリオにより、操作ができないものです。
      • 非アクティブな要素に関連付けられているゲーム領域、アイテム、またはオプションのロックをプレイヤーが解除していない
      • プレイヤーのソフトウェアまたはハードウェアの技術仕様と非アクティブなオプションの要件との間に互換性がないため、オプションまたは視覚要素が無効になっている
      • 上記以外でプレイヤー固有の状況のために、UI 内にある視覚要素が操作できないシナリオ
    例 (展開可能)

    Fenyx Immortals Rising のスクリーンショット。4 つの明るい赤いシースルートーチが表示され、それぞれの上に明るい赤い鍵アイコンが表示されます。 雪に覆われた薄暗い風景の中で、赤い松明は周囲の濃い青とよく対照的です。

    これは非アクティブなテキストの例ではありませんが、Fenyx Immortals Rising では、まだロック解除されていないゲーム内要素が、上にロック アイコンが付いた形で明るい赤で表示されます。これはゲーム環境内で視覚的に目立って見えます。

    現在の選択項目が白いテキストでグレー表示されているゲーム内ストアの Sea of Thieves のスクリーンショット 「バンドルのみ」と読みます。

    ビデオのリンク: 非アクティブな要素の説明

    Sea of Thieves ストアでは、プレイヤーが個別に購入できないアイテムにフォーカスを移動すると、アイテムの上に "バンドルのみ" という語がオーバーレイ表示されます。 "バンドルのみ" テキストは、最小コントラスト比 3:1 を満たしています。

  • プレースホルダー テキスト、または入力フィールドに入力されたテキストは、入力フィールドの背景に対する最小コントラスト比 4.5:1 (大きなテキストの場合は 3:1) を満たす必要があります。

    例 (展開可能)

    ドラゴンクエスト XI S: 過ぎ去りし時を求めてのキャラクター命名のスクリーンショット。名前に許可される各文字スペースに関するアステアリスクの付いたプレースホルダーがあります。下部の著作権には、

    ドラゴンクエストXI 過ぎ去りし時を求めて S の、4.5:1 のコントラスト比に合わせるにはキャラクター名を何文字にするかをプレイヤーに知らせるプレースホルダーのスター アイコン。

  • ハイ コントラスト モード (明るい、暗い、またはその両方) を提供する必要があります。 ハイ コントラスト モード (明るい色でも暗い色でも) が有効の場合、すべての UI 要素の背景に対するコントラスト比を 7:1 以上にします。

    例 (展開可能)

    Hyperdot Drifter のハイ コントラスト モード。 アリーナは黒い円で、中央に赤い四角の断面があります。 プレーヤーは、赤い四角を避けるためにアリーナ内を移動する青い点で表されます。

    ゲーム Hyperdot は、暗いハイ コントラスト モードと明るいハイ コントラスト モードの両方を備えています。 このモードを有効にすると、表示されるすべての視覚要素の背景に対するコントラスト比が 7:1 になります。

注意

ハイ コントラスト モードは明るい要素と暗い要素のセパレーションを増すために意図されているという誤解が一般にありますが、ハイ コントラスト モードの本当の意図は次のとおりです。

  • 重要な要素の可視性を増す
  • さまざまな種類の重要な要素間の視覚的なセパレーションを増す
  • 重要な要素と重要でない要素の間の視覚的なセパレーションを増す

コントラスト比サマリー チャート

テキスト サイズ コントラスト比
標準サイズのテキストまたは視覚要素 4.5:1
大きなテキストと視覚要素 3:1
非アクティブ要素のテキスト 3:1
ハイ コントラスト モードの要素 7:1
プレースホルダーまたは入力フィールドのテキスト 4.5:1 (標準サイズ) 3:1 (大きなテキスト)
  • 単色ではない背景の上にテキストが表示される場合は、テキスト コントラスト比率は、テキストと背景の最もコントラストの低い領域で計測します。

    例 (展開可能)

    Sea of Thieves のアクセシビリティ設定メニュー。 メニューの背景は明るいターコイズ色で、濃いターコイズ色の魚の模様が描かれています。 メニューのテキストは白で、その後ろに暗い背景があるため、背景と区別できます。

    Sea of Thieves では、テキストの後ろに明るいターコイズと暗いターコイズのパッチがあります。 コントラスト測定を行うときは、2 つのターコイズのうち明るい方を背景色として使用する必要があります。

  • 利用可能な場合は、プラットフォームが提供するコントラスト設定を読み、ゲームの起動時にハイ コントラスト モードを既定で有効にするか無効にするかを判断し、それに従ってゲーム UI を調整します。

    例 (展開可能)

    ゲームがシステムのプラットフォーム設定を読み取ることができる場合、それらは最初のゲーム起動時に自動的に適用される必要があります。 プレイヤーがシステムまたはプラットフォーム レベルでハイ コントラスト モードを有効にして、ゲームでもハイ コントラスト モードが提供されている場合は、プレイヤーがゲーム設定を再構成するまで、ゲームの起動時にそれを有効にする必要があります。 この例では、プレーヤーのシステム設定でハイ コントラスト モードが有効になっています。 彼らが Microsoft Solitaire を開くと、ゲームのハイ コントラスト バージョンも開きます。

    標準ゲーム モード

    標準のソリティア ゲーム モード。 白いカードが緑のテーブルに並べられます。 カードの裏面には、緑豊かな複雑な模様が描かれています。

    ハイ コントラスト モード

    ハイコントラストのソリティア ゲーム モード。 黒いカードは明るい緑色で縁取られ、黒いテーブルにどのカードが配置されているかを示す白いシンボルが描かれています。 カードの裏面には、緑豊かな複雑な模様が描かれています。

  • 前景色と背景テキストの色は、プレーヤーが構成/設定できます。

  • 色だけに頼って情報を伝達しないようにしてください。 これができない場合は、プレイヤーにゲームの重要な要素の色を選択するオプションを提供します。

    例 (展開可能)

    カラー ピッカーを使用してカスタム色覚異常オプションをナビゲートする、バトルフィールド 2042 のアクセシビリティ メニューのスクリーンショット。 RGB 値、色、色相ピッカーが表示されます。

    Battlefield 2042 の [アクセシビリティ] メニューには、HUD アイコンの色をカスタマイズする色覚特性オプションがあります。 オプションは、1 型色覚特性、2 型色覚特性、3 型色覚特性、およびカスタムです。 カスタム オプションを使用すると、プレイヤーは必要に応じて特定の色と色合いを選択できます。 ゲームのプレイヤーが選択した色をシャドウ、中間トーン、明るいゲーム環境で表示するプレビューも提供されます。

  • 画像には、ロゴ以外のテキストを含めないでください。

    例 (展開可能) 画像ファイルにはテキストを含めないでください。静止画像ファイル内にある場合、テキストとその背景をコントラスト比を満たすように調整できないためです。

    Gears 5 対メニュー。 対戦タイルが選択されています。 プレイヤー キャラクターと敵が向かい合った写真が表示され、黒いグラデーションの前に白いテキストが下部に表示されます。 テキストには「対戦: 最大 9 人のプレイヤーと対戦できるマルチプレイヤー」と書かれています。 タイルの下には、A を押してこのオプションを選択するオプションがあります。

    Gears 5 のこの例では、「Versus」テキストとその下の説明文は、背景画像の一部ではなく、テキスト要素です。 テキストは、画像の上にオーバーレイできる独自の UI 要素である必要があります。理想的には、テキストの後ろに半透明から不透明の背景を配置して、コントラスト比を上げることができます。 テキストは画像自体の一部であってはなりません。 これにより、画面のナレーションの互換性を確保できます。

  • ロゴまたはブランド名の一部であるテキストや視覚要素には、コントラスト最小要件は適用されません。

    例 (展開可能) メニュー画面のゲーム タイトルのロゴなどのロゴタイプは、コントラスト比をテストする必要はありません。

    Age of Empires 2 Definitive Edition のメイン メニュー。 メニューの上部には Age of Empires 2 のロゴがあり、その下にメニュー オプションが表示されます。

    Age of Empires II のこの例では、メニューの上部にある "Age of Empires II" のテキストはゲームのロゴの一部であるため、コントラスト要件を満たす必要はありません。

  • 純粋に装飾目的であるテキストや視覚要素、誰にも表示されないテキストや視覚要素、または他の大きな視覚的コンテンツを含む画像の一部であるテキストや視覚要素には、コントラスト要件は適用されません。

    例 (展開可能) 純粋に装飾的であり、プレイヤーに重要な情報を提供しない画像や要素については、コントラスト比をテストする必要はありません。

    Gears 5 対メニュー。 この画面の上部には、プレーヤーのゲーマータグの周囲に青と灰色の装飾的な四角形があります。 この装飾画像の周囲には緑色の四角形があり、これが例で参照している装飾画像であることを示しています。 また、他のメニュー オプションを囲む角張った装飾グラフィックの両側を指す 2 つの緑色の矢印もあります。

    この Gears 5 メニュー画面では、強調表示された要素は純粋に装飾的です。 これらの効果はページに対して純粋に美的です。 したがって、それらはコントラスト ガイドラインの対象ではありません。

    注意

    この画像は、画面の右上に緑色の長方形のインジケーターがあり、画面の中央下に 2 つの矢印があり、この例が参照している装飾画像を強調するように編集されています。 これらの緑色の要素は、Gears 5 UI の一部ではありません。

プレイヤーへの影響の可能性

この XAG のガイドラインは、次のようなプレイヤーにとっての障壁を取り除く上で役立ちます。

Player
弱視のゲーマー X
色覚に障碍があるプレイヤー X
聴力のないプレイヤー X
聴力に制限があるプレイヤー X
認知障碍または学習障碍のあるプレイヤー X
その他: 小さい画面でテキストを読むプレイヤー、画面から離れた場所に座っているユーザー、反射のある画面を使用しているユーザー、またはロー コントラスト ディスプレイを使用しているユーザー。 X

リソースとツール

リソースの種類 ソースへのリンク
記事 テキスト/UI と背景の間にハイ コントラストを提供する (外部)
記事 コントラストを調整するためのオプションを提供する (外部)
記事 少なくともテキスト色の選択肢とロー/ハイ コントラストの選択肢を提供する (外部)
ツール Windows 向けアクセシビリティ インサイト
ツール カラー コントラスト アナライザー (CCA) (外部)
ツール カラー オラクル (外部)
ツール コントラスト比ツール (外部)
Microsoft Game Development Kit API XHighContrastGetMode (このリンクでは、NDA Xbox プログラムで提供されるサインイン資格情報が必要となる可能性があります。)