色覚の違いを考えたWEB配色｜色だけに頼らない見せ方

WEBサイトの色は、人によって同じように見えるとは限りません。特に、赤と緑などの違いを見分けにくい人もいるため、色だけで「完了」「エラー」「選択中」を示すと情報が伝わらない場合があります。色覚の違いを前提に、色を活かしながら文字・記号・形でも意味が分かる配色を考えます。

色の組み合わせだけで意味を区別しない

色覚には個人差があり、特定の色同士を区別しにくい場合があります。すべての人にとって見分けやすい色の組み合わせが一つだけあるわけではありません。赤と緑のボタンを並べて「赤が停止、緑が実行」と説明するだけでは、両者の違いが伝わらない可能性があります。

まず、その色で示す情報を文章に置き換えます。例えば、完了した処理には「完了」、対応が必要なら「要確認」と表示します。さらにチェックマークや感嘆符、輪郭線などを使うと、色を見分けなくても状態を確認できます。記号だけでも意味が曖昧にならないよう、文字とセットで使いましょう。

リンクにも色だけを使わず、本文中では下線を付ける方法があります。選択中のメニューには太字や左側の線を加え、フォームで入力が必要な箇所には「必須」、エラー箇所には修正内容を明記します。ここでは、特に状態表示の具体的な色と組み合わせ方を見ていきます。

完了・進行中・要確認を見分ける配色例

架空の予約管理画面を想定します。ページ背景は白 ■#FFFFFF、通常の本文は濃い青灰 ■#273746 にします。両者の文字コントラスト比は約12.20:1です。HEXコードは、色を16進数で表す記法です。

「✓ 完了」は、青緑 ■#175D72 の文字と輪郭、淡い青 ■#EDF6F7 の背景を組み合わせます。文字と背景のコントラスト比は約6.72:1です。色を読み取れなくても、チェックマークと「完了」の文字で状態が伝わります。

「→ 進行中」は、茶色 ■#79531F の文字と輪郭、淡い黄色 ■#FFF5DF の背景を組み合わせます。コントラスト比は約6.31:1です。矢印と「進行中」を合わせて表示し、完了との違いを色相だけに頼らず示します。

「! 要確認」は、濃い赤紫 ■#8D3844 の文字と輪郭、淡いピンク ■#FCEEF0 の背景を組み合わせます。コントラスト比は約6.70:1です。「要確認」の理由が入力不足なら、状態ラベルだけで終わらせず「電話番号を入力してください」のような修正内容も表示します。

いずれも淡い背景同士の違いだけでは十分に区別できない場合があります。文字と記号を見える状態に保ち、必要に応じて各ラベルを濃い輪郭で囲みましょう。例の輪郭色は白背景 ■#FFFFFF とも、それぞれ約7.38:1、6.84:1、7.55:1の差があります。

文字と操作状態を別々に確認する

WCAG（Web Content Accessibility Guidelines、WEBコンテンツを利用しやすくするための指針）2.2の「色の使用」では、色を情報伝達の唯一の視覚的手段にしないことが求められます。AA（適合レベルの一つ）のコントラスト基準では、通常の文字は背景と4.5:1以上、操作に必要な輪郭や状態表示などは隣接色と3:1以上が必要な場合があります。

本文中のリンクを青 ■#205D81 で表示する場合、白背景 ■#FFFFFF との文字コントラスト比は約7.13:1です。それでも、周囲の本文との色差だけでリンクと判断させず、下線も付けましょう。選択中のタブなら「選択中」という文字や形の変化を加え、キーボードで操作する際のフォーカス表示も確認します。

スマートフォンや白黒表示、色覚の見え方を確認するツールでも点検します。ただし、シミュレーション結果だけで全員に使いやすいと保証できるわけではありません。HueRollではHEXコードから配色候補や濃淡、選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAAの自動判定はできません。実際の組み合わせを別途検証し、文字を読めば意味が分かる状態に仕上げましょう。