視力が良好であれば、誰もが同じように色やテキストの読みやすさに気付くはずですが、もちろんそうではありません。
ご想像のとおり、一部のユーザーにとっては読みやすい色の組み合わせであっても、他のユーザーにとっては難しい、または不可能な色の組み合わせもあります。これは通常、色のコントラスト、つまり前景色と背景色の輝度の関係にあります。色が似ている場合はコントラスト比が低く、色が異なる場合はコントラスト比が高くなります。
WebAIM ガイドラインでは、すべてのテキストに対して AA（最小）コントラスト比 4.5:1 を推奨しています。 非常に大きなテキスト（デフォルトの本文テキストより 120 ～ 150% 大きいサイズ）は例外で、比率は 3:1 まで下がることができます。以下に示すコントラスト比の違いに注目してください。
レベル AA では、4.5:1 のコントラスト比が選択されました。これは、約 20/40 の視力喪失のユーザーが通常経験するコントラスト感度の損失を補正するためです。20/40 は、80 歳頃の典型的な視力であると報告されています。ロービジョンの方や色覚に障がいを持つ方のために、本文のコントラストを 7:1 まで上げることが可能です。
Lighthouse のユーザー補助監査を使用すると、色のコントラストを確認できます。 DevTools を開き、[監査] をクリックして、[ユーザー補助] を選択してレポートを実行します。
Chrome には、ページの低コントラスト テキストをすべて検出できる試験運用版の機能もあります。アクセス可能な色の候補を使用して、低コントラストのテキストを修正することもできます。
完全なレポートを確認するには、ユーザー補助インサイト拡張機能をインストールしてください。 Fastpass レポートのチェックの 1 つは、色のコントラストです。 失敗した要素の詳細なレポートが表示されます。
Advanced Perceptual Contrast Algorithm（APCA）
Advanced Perceptual Contrast Algorithm（APCA）は、色覚に関する現代の研究に基づいてコントラストを計算する新しい方法です。
AA/AAA のガイドラインと比較すると、APCA はコンテキストにより依存します。
コントラストは、次の特徴に基づいて計算されます。
- 空間プロパティ（フォントの太さとテキストサイズ）
- テキストの色（テキストと背景の明度の違い）
- コンテキスト（周囲の明るさ、周囲の状況、文章の意図する目的）
Chrome には、AA/AAA コントラスト比のガイドラインを APCA に置き換える試験運用版の機能が含まれています。
色のみで情報を伝えない
色覚に障がいを持つ人は世界中で約 3 億 2,000 万人もいます。男性の約 12 人に 1 人に、女性の約 200 人に 1 人が、なんらかの「色覚異常」の状態にあります。つまり、ユーザーの約 20 分の 1（5%）が、サイトを意図したとおりに操作できないことを意味します。情報を伝えるために色に依存している場合は、その数値を許容できないレベルにまで押し上げています。
たとえば、入力フォームでは、電話番号に無効であることを示す赤色の下線が表示されます。しかし、色覚に欠陥のあるユーザーやスクリーン リーダーのユーザーには、その情報はまったく伝わりません。そのため、ユーザーが重要な情報にアクセスできる方法は常に複数用意するようにしてください。
WebAIM チェックリストのセクション 1.4.1 には、「コンテンツを伝える、または視覚要素を区別する唯一の方法として、色を使用することはすべきではない」とされています。また、特定のコントラスト要件を満たす場合を除き、「色のみを使用してリンクと周囲のテキストを区別するべきではない」という記述もあります。代わりに、アンダースコアなど、（CSS の text-decoration プロパティを使用して）リンクがアクティブであることを示すインジケーターを追加することをおすすめします。
前の例を修正する簡単な方法は、フィールドが無効であることとその理由を通知する別のメッセージをフィールドに追加することです。
アプリを作成するときは、こうしたことを念頭に置き、重要な情報を伝えるために色に過度に依存する部分に注意してください。
サイトがユーザーにどのように見えるか知りたい場合や、UI で色を多用している場合は、DevTools を使用してさまざまな視覚障がい（さまざまな種類の色覚異常など）をシミュレートできます。Chrome には視覚障がいのエミュレート機能があります。DevTools を開いて、ドロワーの [Rendering] タブを開くには、次の色不足をエミュレートします。
- 1 型 2 色覚：赤色の光をまったく認識できない状態。
- 2 型 2 色覚：緑色の光を感知できない状態。
- 3 型 2 色覚：青色の光を感知できない状態。
- 色覚異常: 灰色以外の色を感知できない状態（きわめてまれ）。
高コントラスト モード
高コントラスト モードでは、前景の色と背景色を反転できるため、多くの場合、テキストを目立たせることができます。ロービジョンの方は、高コントラスト モードを使用することでページ上のコンテンツを操作しやすくなります。マシンで高コントラストを設定する方法はいくつかあります。
Mac OSX や Windows などのオペレーティング システムは、システムレベルですべてに対して有効にできる高コントラスト モードを備えています。
高コントラスト設定を有効にして、アプリのすべての UI が引き続き表示され、使用可能であることを確認することをおすすめします。
たとえば、ナビゲーション バーでは、現在選択されているページを示すために薄い背景色を使用します。高コントラスト拡張機能で表示すると、曖昧さは完全に消え、読者はどのページがアクティブかを理解できます。
同様に、前のレッスンの例では、無効な電話番号フィールドの赤い下線が、識別が難しい青緑で表示されることがあります。
前述のコントラスト比を満たしていれば、高コントラスト モードをサポートしても問題はありません。しかし、さらに安心できるよう、高コントラスト Chrome 拡張機能をインストールし、ページを 1 回見直して、すべてが想定どおりに機能し、外観が想定どおりに動作することを確認してください。