色覚多様性に配慮した配色設計｜色に頼らずコントラストを確保する実践手順

色覚多様性に配慮した配色では、色を選ぶだけでなく、文字や操作部品を十分な明るさの差で見分けられるようにし、色以外の手がかりも添えます。赤と緑を避けるといった単純なルールだけでは、リンク、エラー、グラフなどの意味をすべての利用者へ伝えられません。

この記事では、WCAG 2.2の基準を基に、配色案を作成してから実装後に確認するまでの手順を整理します。先にWebアクセシビリティの基本と改善の優先順位を確認すると、配色をサイト全体の品質管理に位置付けやすくなります。

• 色だけで意味や状態を伝えない
• 文字と背景のコントラスト比を用途ごとに確認する
• ボタン、アイコン、グラフなどの非テキスト要素も確認する
• 通常時だけでなく、ホバー、フォーカス、エラーなどの状態を検証する

色覚多様性への配慮は何を変えるのか

色覚多様性とは、色の見え方や色同士の区別のしやすさに個人差があることを表す言葉です。配慮の目的は、特定の色を一律に禁止することではありません。色の区別が難しい場合でも、情報の意味と操作方法を理解できる設計にすることです。

たとえば、入力欄のエラーを枠の赤色だけで示すと、何が問題なのかを色から推測しなければなりません。「メールアドレスを確認してください」という文とエラーアイコンを添え、該当欄と文を関連付ければ、色を識別しにくい利用者にも修正箇所が伝わります。

色覚シミュレーターは、配色案の見分けにくさを探す補助手段です。ただし、シミュレーション結果だけで適合を判断することはできません。コントラスト比の測定、色以外の手がかりの確認、実際の画面状態の確認を組み合わせます。

WCAG 2.2の配色とコントラスト基準

WCAGは、Webコンテンツを利用しやすくするための国際的なガイドラインです。配色では、文字の読みやすさだけでなく、情報を色だけに依存させないことや、操作部品とグラフィックの見分けやすさも扱います。

WCAGでいう大きな文字は、18ポイント以上、または太字で14ポイント以上です。通常の本文を「大きく見えるから3:1でよい」と判断せず、実際の文字サイズと太さを確認します。例外を含む詳しい判定は、WCAG 2.2「1.4.3 コントラスト（最低限）」の解説も参照してください。

コントラスト比の読み方

コントラスト比は、前景色と背景色の相対的な明るさの差を1:1から21:1の範囲で表した値です。色名や色相の違いではなく、実際に隣り合う二色を組み合わせて計算します。数値が基準を満たしても、文字サイズ、文字の太さ、背景画像、表示状態が変われば別の確認が必要です。

この表は、指定した二色が隣接する場合の計算例です。リンクは下線も付け、エラーは文やアイコンも添えます。比率に適合することと、色だけに頼らず意味を伝えることは別の確認項目です。

body {
  background-color: #FFFFFF;
  color: #1A1A1A;
}

a {
  color: #005EA8;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.button-danger {
  background-color: #CC0000;
  color: #FFFFFF;
}

色だけに頼らず情報を伝える方法

コントラスト比を満たしても、二つの状態を色の違いだけで示せば、意味を識別できない場合があります。文章、形、模様、アイコン、線種などを併用し、色を補助情報として使います。

グラフでは、凡例の色と系列を見比べさせるより、線や領域の近くに系列名を置くと対応関係を追いやすくなります。表や代替説明を含む設計は、データ表とグラフのアクセシビリティで詳しく解説しています。

配色を決めて検証する手順

1. 用途を洗い出す：本文、見出し、リンク、ボタン、入力欄、エラー、グラフなど、色を使う要素と表示状態を一覧にします。
2. 色の役割を決める：ブランドカラーをそのまま文字色にせず、背景との組み合わせごとに役割を定めます。
3. 文字の比率を測る：通常文字、大きな文字、背景画像上の文字を分け、実際に隣り合う色で測定します。
4. 非テキスト要素を測る：ボタンの境界、入力欄、フォーカス表示、意味を持つアイコンとグラフを確認します。対象の考え方は、非テキストコントラストの実装と確認方法も参考になります。
5. 色以外の手がかりを加える：下線、文、アイコン、模様、線種を使い、色を外しても意味が残るか確認します。
6. 複数の状態で見直す：通常時に加え、ホバー、フォーカス、選択、エラー、無効化などを実画面で確認します。
7. ルールを記録する：色の値だけでなく、利用できる背景、用途、文字サイズ、状態、代替手がかりをスタイルガイドへ残します。

確認時に起こりやすい見落とし

• デザインデータでは白背景だった色を、実装では薄い灰色や画像の上に置いている
• 通常時だけを測り、ホバーやフォーカスで文字や境界が見えにくくなっている
• 大きな文字向けの3:1を、小さい本文にも適用している
• シミュレーターで区別できたことを、WCAG適合の証明として扱っている
• エラーやグラフの意味を、コントラストのある二色だけで伝えている

配色の検証は、基準値の確認と情報設計の確認に分けると漏れを見つけやすくなります。まずコントラスト比を測り、次に色を隠しても意味と操作方法が分かるかを確かめ、最後に実際の表示状態を通して確認します。

公開前チェックリスト

• 通常文字は4.5:1以上、大きな文字は3:1以上になっている
• 操作部品と理解に必要なグラフィックは、対象となる隣接色に対して3:1以上になっている
• リンク、エラー、必須項目、状態、グラフを色だけで区別していない
• 通常、ホバー、フォーカス、選択、エラーなどの各状態を確認した
• 背景画像やグラデーション上の文字を、実際の背景で測定した
• シミュレーション結果だけで判断せず、測定と画面確認を行った
• 色の用途と使用条件をスタイルガイドに記録した