色とコントラスト

画面上のテキストを読もうとしたときに、カラーパターンが原因で読みにくかったり、明るい場所や暗い場所で画面が見えにくかったりしたことはありませんか？あるいは、色覚異常の 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 型色覚（一般に赤色盲として知られています）は、男性の 1.01% ～ 1.08%、女性の 0.02% ～ 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 px 以上、または 14 pt / 18.5 px 以上の太字で表示されるのが特徴です。ロゴと装飾要素は、これらの色のコントラストの要件から除外されます。

幸いなことに、色のコントラストを計算してくれるツールがたくさんあるため、高度な数学の知識は必要ありません。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 を積み重ねています。

色とコントラストの両方を比較します。

コントラスト設定のないダークモード。