色覚多様性に配慮したWebデザイン｜色だけに頼らない伝え方と配色の基本

2026年7月9日

「エラーは赤、正常は緑」「必須項目は赤字」——こうした表示は、色を見分けにくい人には正しく伝わらないことがあります。

大切なのは、特定の色を一律に禁止することではありません。色が見分けられなくても、情報や操作の意味が伝わるようにすることです。この記事では、色覚多様性に配慮したWebデザインの基本を、すぐ実践できる例とともに解説します。

色覚多様性（色覚異常）とは

色の感じ方や見分けやすさには個人差があります。赤系と緑系、青系と紫系など、特定の色が似て見えることもありますが、見え方は一人ひとり異なります。「色がまったく見えない」とは限りません。

近年は、見え方の違いを個人の異常としてのみ捉えない「色覚多様性」「色覚特性」という表現も使われています。一方、検索や医療の場では「色覚異常」「色弱」という言葉も使われるため、本記事ではこれらを含む広い意味で「色覚多様性」と表記します。

色だけに頼るデザインが招く問題

Webサイトで問題になりやすいのは、色の組み合わせそのものより、色だけに意味を持たせる設計です。

場面	色だけに頼った例	起こり得ること
入力フォーム	エラー欄の枠だけを赤くする	どの項目に問題があるのかわからない
必須項目	項目名を赤字にする	必須か任意かを区別できない
グラフ	複数の系列を色だけで分ける	どの線がどのデータか判断できない
リンク	本文中のリンクを色だけで示す	クリックできる場所に気づきにくい
予約状況	空きを緑、満席を赤で示す	状況を取り違える可能性がある

赤と緑、緑と茶、青と紫などは、条件によって見分けにくくなる代表的な組み合わせです。ただし、「この2色は必ず使ってはいけない」と色名だけで判断するのは適切ではありません。明るさの差、線の太さ、表示面積、周囲の色などによっても見分けやすさは変わります。

色以外の手がかりを添える

もっとも効果的な対策は、文字・形・模様など、色以外の手がかりを併用することです。

エラー欄には色だけでなく、警告アイコンと「メールアドレスを入力してください」などの文言を表示する
必須項目には「必須」または「※」をテキストで添える
リンクには下線をつけ、通常の文章と区別する
グラフには実線・破線などの線種や模様を使い、系列名を近くに直接表示する
予約枠には「○ 空きあり」「× 満席」のように、記号と文字を併記する
操作案内では「赤いボタンを押す」ではなく、「送信ボタンを押す」と名称で伝える

たとえば、フォームのエラー表示は次のように変えられます。

改善前：入力欄の枠だけを赤くする
改善後：赤い枠＋警告アイコン＋「電話番号は半角数字で入力してください」と表示する

色を使うこと自体は問題ではありません。色を補助として活用しながら、色がわからなくても意味を理解できる状態を目指します。

コントラストと配色の基本

文字やアイコンを読み取りやすくするには、色相の違いだけでなく、前景と背景の明るさの差（コントラスト）を確保することが重要です。

WCAG 2.2の達成基準（レベルAA）では、文字と背景のコントラスト比について、次の値が目安とされています。

通常の大きさの文字：4.5:1以上
大きな文字：3:1以上
入力欄の境界線やアイコンなど、意味のあるUI部品・図形：3:1以上

ただし、コントラスト比を満たせば、色だけで状態を示してよいわけではありません。たとえば、エラーを赤、正常を緑だけで示す設計は、両方の色に十分な明暗差があっても、状態の意味を正しく区別できないことがあります。「十分なコントラスト」と「色以外の手がかり」は、別々に確認する必要があります。

ブランドカラーを変えにくい場合は、背景色との組み合わせを調整する、文字色としてではなく装飾に使う、ラベルやアイコンを加えるといった方法で対応できます。

公開前のチェックと、閲覧者側の調整機能

配色は、担当者の感覚だけで判断せず、公開前に次の方法で確認しましょう。

白黒表示で確認する：グレースケールにしても、ボタン・グラフ・状態表示を区別できるか確認します。
色覚シミュレーションを使う：ブラウザの開発者ツールや専用ツールで、複数の見え方を確認します。シミュレーションは参考であり、すべての人の見え方を完全に再現するものではありません。
コントラスト比を数値で測る：コントラストチェッカーを使い、通常文字4.5:1以上などの目安を満たしているか確認します。
色を使わず意味を説明できるか確かめる：「赤い箇所」のような色名を使わなくても、状態や操作を説明できるかを見直します。
可能なら実際の利用者に確認してもらう：ツールだけでなく、色覚特性のある人による確認を組み合わせると、実際の使いにくさに気づきやすくなります。

サイト側で情報が正しく伝わる設計にしたうえで、閲覧者が色やコントラストを自分に合わせて調整できる機能を用意すると、さらに選択肢を増やせます。ただし、調整機能を追加しても、グラフのラベル不足や「赤・緑だけで示したエラー表示」が自動で直るわけではありません。基本設計を整えることが先、閲覧者側の調整機能はその補助と考えましょう。