色覚異常のあるユーザーがページを使用できるかどうかを確認する

  • [アーティクル]

色覚異常のあるユーザーが Web ページを使用できるようにチェックするには、[レンダリング] ツールの [視覚障害のエミュレート] ドロップダウン リストを使用します。

アクセシビリティ テストのデモ Web ページでは、さまざまな寄付の状態で、差別化の唯一の手段として色が使用されます。

  • 緑は多額の寄付を受け取ったことを意味します。
  • 黄色は、中程度の寄付を受け取ったことを意味します。
  • 赤は、寄付が少ない金額を意味します。

ただし、すべてのユーザーが意図したとおりにこれらの色を体験するとは限りません。 レンダリング ツールのエミュレーション ビジョンの欠陥機能を使用すると、さまざまな視覚を持つユーザーがデザインをどのように認識するかをシミュレートすることで、この設計が十分ではないことを確認できます。

色覚異常のあるユーザーが Web ページを使用できるかどうかをチェックするには:

  1. アクセシビリティ テストのデモ Web ページなど、新しいウィンドウまたはタブ で Web ページを開きます。

  2. Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。 または、 F12 キーを押します。 Web ページの横に DevTools が開きます。 既定では、 クイック ビュー パネルは DevTools の下部に開いています。

  3. クイック ビュー パネルがまだ開いていない場合は、Esc キーを押してクイック ビュー パネルを開きます (フォーカスが DevTools の場合)。 [クイック ビュー] パネルで、[その他のツール (+)] ボタンをクリックし、[レンダリング] ツールを選択します。

  4. [ エミュレーション ビジョンの欠陥 ] ドロップダウン リストまで下にスクロールし、[ Protanopia (赤なし)] を選択します。 プロタトピア は赤い光に対する感度を低下させ、緑、赤、黄色を区別するのが難しくなります。

    プロタトピアを持つ人としてドキュメントを表示すると、ドキュメントが表示されます

  5. シミュレーションを削除するには、[ エミュレーション ビジョンの欠陥 ] ドロップダウン リストで [ エミュレーションなし] を選択します。

関連項目

  • 視覚不足をエミュレートする - Protanopia、Deuteranopia、Tritanopia、Achromatopsia など、[ 視覚の欠陥をエミュレート する] ドロップダウン リストの項目を定義します。