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