色とコントラスト

画面のカラーパターンが原因でテキストが読みにくいと感じたこと、非常に明るい環境や暗い環境で画面が見づらくなったことはありませんか？あるいは、推定色覚異常の人は 3 億人、ロービジョンの人は 2 億 5, 300 万人など、より永続的な色覚の問題を抱えている方もいらっしゃるかもしれません。

デザイナーやデベロッパーは、人々が色やコントラストをどのように受け止めるか（一時的、状況的、恒久的に）を理解する必要があります。これにより、視覚に関するニーズに適切に対応できます。

このモジュールでは、アクセシビリティの高い色とコントラストの基礎を紹介します。

色を認識する

物体に色はありませんが、光の波長を反射することをご存じですか？色を目にすると、目はその波長を受信して処理し、色に変換します。

デジタル アクセシビリティに関しては、これらの波長を色相、彩度、明度（HSL）の観点から扱います。HSL モデルは、RGB カラーモデルの代替として作成されており、人間が色を認識する方法とより緊密に一致しています。

色相は、赤、緑、青など、色を定性的に記述する手段です。それぞれの色相はカラースペクトル上で特定のスポットを持ち、その値は 0 ～ 360、赤は 0、緑は 120、青は 240 です。

彩度は色の強さで、0%～ 100% のパーセンテージで示されます。完全な彩度（100%）の色は非常に鮮明で、彩度のない（0%）色はグレースケールまたはモノクロです。

明度は、色の明るい文字または暗い文字であり、0%（黒）から 100%（白）までのパーセンテージで示されます。

色のコントラストを測定する

さまざまな視覚障がいのある人々をサポートするために、WAI グループは色のコントラストの公式を作成し、テキストと背景の間に十分なコントラストを持たせるようにしました。これらの色のコントラスト比に従うと、低視力の人でもコントラスト強化支援技術なしで背景のテキストを読むことができます。

ビビッドなカラーパレットの画像と、特定の色覚特性を持つ画像を比較してみましょう。

左側の画像は、紫、赤、オレンジ、黄、アクアグリーン、ライトブルー、濃い青色で描かれた虹色の砂を示しています。右側は、より明るい色とりどりの虹のパターン。

2 型 2 色覚

2 型 2 色覚（一般に緑色盲）は、男性の 1% ～ 5%、女性の 0.35% ～ 0.1% に発生します。

2 型 2 色覚の人は、緑色の光に対する感度が低下しています。この色覚特性フィルタは、この種の色覚特性をシミュレートします。

1 型 2 色覚

1 型 2 色覚（一般に赤盲）は男性の 1.01%～ 1.08%、女性の 0.03% に発症します。

1 型 2 色覚の人は、赤色光に対する感度が低下しています。この色覚特性フィルタは、この種の色覚特性をシミュレートします。

色覚または単色覚

色覚異常や単色覚（または完全な色覚異常）は、ごくまれに発生します。

色覚異常または単色性の人は、赤色、緑色、青色の光を知覚することはほとんどありません。この色覚特性フィルタは、このタイプの色覚異常の状態をシミュレートします。

色のコントラストを計算する

色のコントラストの式では、色の相対輝度を使用してコントラストを決定（1 ～ 21）します。この数式は一般に [color value]:1 と短縮されます。たとえば、純黒と純白のコントラスト比は 21:1 が最も高くなります。

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

レギュラー サイズのテキスト（テキストの画像を含む）の場合、色に関する WCAG の最小要件を満たすため、色のコントラスト比を 4.5:1 にする必要があります。大きいサイズのテキストと基本アイコンの色のコントラスト比は 3:1 にする必要があります。大きいサイズのテキストは、少なくとも 18 pt / 24 ピクセルまたは 14 pt / 18.5 ピクセルの太字で表示されます。ロゴや装飾要素には、これらの色のコントラストに関する要件は適用されません。

幸いなことに、色のコントラストを計算してくれるツールが多数あるため、高度な計算は必要ありません。Adobe Color、Color Contrast Analyzer、Leonardo、Chrome の DevTools カラー選択ツールなどのツールを使用すると、色のコントラスト比を簡単に測定でき、最もインクルーシブな色ペアやパレットを作成するための推奨事項が提示されます。

色の使用

色のコントラスト レベルが適切でないと、単語、アイコン、その他のグラフィック要素が見つかりにくくなり、デザインがすぐに見られなくなります。ただし、画面上での色の使用方法にも注意を払うことが重要です。色だけを使用して情報やアクションを伝えたり、視覚要素を区別したりすることはできません。

たとえば、「続けるには緑色のボタンをクリックしてください」と言ったときに、ボタンに追加のコンテンツまたは識別子を省略すると、特定の色覚異常の人はどのボタンをクリックすべきかを判断するのが難しくなります。同様に、多くのグラフ、チャート、表では、色のみを使用して情報を伝えています。パターン、テキスト、アイコンなどの別の識別子の追加は、ユーザーがコンテンツを理解するために不可欠です。

デジタル商品をグレースケールで表示すると、色の潜在的な問題をすばやく検出できます。

色でフォーカスされたメディアクエリ

色のコントラスト比や画面上の色の使用を確認するだけでなく、画面の表示内容をユーザーがより細かく制御できる、ますます広くサポートされているメディアクエリを適用することを検討してください。

たとえば、@prefers-color-scheme メディアクエリを使用してダークモードを作成できます。これは、恐怖症や光に敏感なユーザーに役立つ機能です。@prefers-contrast を使用して高コントラストのテーマを作成すると、色覚異常やコントラスト感度のあるユーザーにも対応できます。

カラーパターンを優先

メディアクエリ @prefers-color-scheme を使用すると、ユーザーがアクセス先のウェブサイトやアプリのライトモードまたはダークモードのバージョンを選択できます。このテーマ変更の実際の動作を確認するには、ライトモードとダークモードの設定を変更し、このメディアクエリをサポートするブラウザに移動します。Mac または Windows でダークモードの手順を確認してください。

コントラスト優先

@prefers-contrast メディアクエリは、ユーザーの OS 設定をチェックしてハイ コントラストのオンとオフを切り替えます。このテーマ変更の動作を確認するには、コントラスト設定を変更し、このメディアクエリをサポートするブラウザ（Mac と Windows のコントラスト モード設定）に移動します。

メディアクエリのレイヤ化

色にフォーカスしたメディアクエリを複数使用すると、より多くの選択肢をユーザーに提供できます。この例では、@prefers-color-scheme と @prefers-contrast をスタックしています。

理解度チェック

色とコントラストに関する知識をテストする