Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

色とコントラスト

画面上のテキストを読もうとして、配色が原因で読みづらかったり、明るい環境や暗い環境で画面が見づらかったりしたことはありませんか？あるいは、3 億人の色盲や2 億 5,300 万人の弱視など、色覚に恒久的な問題がある場合もあります。

デザイナーやデベロッパーは、一時的、状況的、永続的に、ユーザーが色とコントラストをどのように認識しているかを理解する必要があります。これにより、視覚的なニーズを最大限にサポートできます。

このモジュールでは、ユーザー補助に適した色とコントラストの基本について説明します。

知覚色

物体には色がなく、光の波長を反射していることをご存じですか？色を認識すると、目はこれらの波長を受信して処理し、色に変換します。

色相環を見ている目。

デジタルアクセシビリティでは、これらの波長を色相、彩度、明度（HSL）で表します。HSL モデルは RGB カラーモデルの代替として作成されたもので、人間が色を認識する方法に近づけています。

色相は、赤、緑、青などの色を質的に記述する方法です。各色相は色スペクトル上の特定の位置を持ち、値は 0～360 の範囲で、赤は 0、緑は 120、青は 240 です。

彩度は色の強さで、0%～100% の範囲で測定されます。彩度が最大（100%）の色は非常に鮮やかで、彩度が 0% の色はグレースケールまたはモノクロになります。

明度は、色の明るい文字または暗い文字で、0%（黒）～ 100%（白）の範囲で示されます。

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

さまざまな視覚障がいのあるユーザーをサポートするため、WAI グループは色のコントラスト数式を作成しました。これにより、テキストと背景の間に十分なコントラストを確保できます。この色のコントラスト比に従うと、中程度の視力の弱い人は、コントラスト強化支援技術を使わずに背景のテキストを読むことができます。

鮮やかな色の画像を見て、特定の色覚障がいのあるユーザーにどのように見えるかを比較します。

オリジナルの虹色の砂。 — 写真撮影: Alexander Grey（Unsplash）

元のレインボーパターン。 — 写真撮影: Clark Van Der Beken、Unsplash より

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

2 型 2 色覚

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

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

1 型 2 色覚

第一色盲（通称赤色盲）は、男性の 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 をスタックしています。

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

理解度をチェックする

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

色だけでは、ドキュメントに十分な識別子とはなりません。読者が UI 要素を識別する際に役立つものは他に何がありますか？

パターン

少し違うようです。パターンだけでは、ユーザーが UI 要素を識別するのに十分ではありません。

テキスト

少し違うようです。ユーザーが UI 要素を識別するには、テキストだけでは不十分な場合があります。

アイコン

少し違うようです。ユーザーが UI 要素を識別するには、アイコンだけでは不十分です。

上記のすべて

はい。2 つ以上の識別子を使用すると、ユーザーが UI 要素を識別しやすくなります。