色やテキストの読みやすさについては、誰もが同じように感じると考えるかもしれません。色がどのように認識されるかは、環境（暗い光や明るい光）と視覚能力によって異なります。あなた自身もそのユーザーにも、色覚異常やロービジョンの人々が何百万人もいるかもしれません。
さまざまな視覚障がいのあるユーザーをサポートするために、WAI グループは色のコントラストの公式を作成して、テキストと背景のコントラストが十分になるようにしました。これらの色のコントラスト比を達成すると、低視力の人でも、コントラスト強化の支援技術なしで背景上のテキストを読むことができます。
図 1 に示すコントラスト比の違いに注目してください。
Web Content Accessibility Guidelines（WCAG）2.0 で設定されたコントラスト比 4.5:1 は必須要件です。この比率が選択されたのは、視力喪失のユーザーがよく経験するコントラスト感度の低下（約 20/40 視力に相当する）を補うためです。
この場合も、4.5:1 は最小値です。ロービジョンや他の色覚障がいのあるユーザーをサポートするには、レベル AAA を満たし、コントラスト 7:1 のコンテンツを作成します。
色のコントラストは、DevTools の Lighthouse のユーザー補助監査で確認できます。
高度な知覚コントラスト アルゴリズム
Advanced Perceptual Contrast Algorithm（APCA）は、色覚に関する現代の研究に基づいてコントラストを計算する方法です。
APCA は、WCAG の AA および AAA レベルよりもコンテキストに依存します。
このモデルでは、コントラストは次の特徴に基づいて計算されます。
- 空間的特性（フォントの太さとテキストサイズ）
- テキストの色（テキストと背景の明度の違い）
- 背景情報（周囲の光、周囲の状況、文章の意図する目的）
Chrome には、AA/AAA のコントラスト比のガイドラインを APCA に置き換える試験運用版の機能が含まれています。
色以外にも重要な情報を伝える
ユーザーに重要な情報を伝えるときは、視覚的な手掛かりに加えて、テキストや代替テキストを使用します。視覚的な手がかりには、色、パターン、画像、フォント スタイル、指示言語などがあります。
たとえば、お問い合わせフォームで無効な入力に赤の下線を引いて示している場合があります。この色表示は、スクリーン リーダーや色覚障がいのあるユーザーに、何かが機能していないことを伝えているわけではありません。ユーザーは、なぜフォームの送信がうまくいかないのか疑問に思われ、あきらめてしまう可能性があります。
特定のエラーについて、複数の方法でお客様に注意を喚起します。たとえば、特定の入力が無効であることと、その理由を通知するエラー メッセージを追加できます。適切な入力内容についてのヘルプテキストを追加することもできます。
視覚的でない追加の手がかりがある限り、無効な入力には赤で下線を引くことができます。
インターフェースでの色の使用に大きく依存している場合は、Chrome DevTools でのコントラストの問題を確認できます。
コントラストを上げて色を反転
ロービジョンの方は、高コントラスト モードを使用することでページ上のコンテンツを操作しやすくなります。高コントラストを設定する方法はいくつかあります。
macOS と Windows のどちらにも、オペレーティング システム全体のコントラスト レベルを上げる方法があります。
前景色と背景色を反転させることもできます（macOS など）。この方法は、ダークモードをサポートしていないウェブサイトやアプリで特に役立ちます。
デベロッパーは、これらの設定を有効にし、ユーザビリティを手動で検証することで、インターフェースが引き続き表示され、使用可能であることを確認できます。
たとえば、ナビゲーション バーでは、選択されたページを示すために薄い背景色を使用することがあります。ハイ コントラスト モードで表示すると、その微妙な部分は完全に消え、読者はどのページがアクティブであるかを把握できます。
コントラストがレベル AA 以上の場合は、色の反転や高コントラストのときにもコンテンツが想定どおりに機能します。ただし、テストを行い、エクスペリエンスが期待どおりであることを検証する価値はあります。