色覚シミュレーションで確認するWeb配色の失敗例と改善方法

赤い線と緑の線で分けたグラフ。赤字だけで示した入力エラー。空きを緑、満席を赤で示した予約表——。色が見分けられる人には直感的でも、色覚特性によっては違いが伝わりにくいことがあります。

色覚シミュレーションは、こうした問題へ気づく手がかりになります。ただし、シミュレーション画像は、特定の人の見え方を完全に再現するものではありません。「色弱の人には必ずこう見える」と断定するためではなく、色の違いが失われても情報が伝わるかを確認するために使います。

この記事では、Webサイトで起こりやすい5つの失敗例を、改善前・改善後の形で紹介します。色覚配慮の考え方を先に確認したい方は、「色覚多様性に配慮したWebデザイン（C-15）」もご覧ください。

色覚シミュレーションでわかること・わからないこと

色の感じ方や見分けやすさには個人差があります。赤系と緑系、青系と紫系など、特定の色が似て見える場合がありますが、同じ色覚特性でも見え方が全員同じとは限りません。明るさ、彩度、表示面積、線の太さ、周囲の色、ディスプレイの状態によっても変わります。

シミュレーションには、次のような役割と限界があります。

シミュレーションで確認しやすいこと	シミュレーションだけでは判断できないこと
色分けした要素が似て見えないか	一人ひとりの実際の見え方
色を失うと情報の区別が消えないか	その画面を長時間使ったときの負担
明るさの差が小さすぎないか	すべての端末・照明環境での見え方
ラベルや模様が区別の助けになるか	操作全体の使いやすさや理解しやすさ

シミュレーションの結果を合否判定にせず、グレースケール、コントラスト測定、実際の利用者による確認と組み合わせます。

失敗例1：グラフを赤と緑の線だけで分ける

改善前

売上Aを赤い実線、売上Bを緑の実線で表示し、凡例も赤・緑の小さな四角だけで示します。

色の違いが小さくなると、二本の線が交差した場所で、どちらの線を追っていたのかわからなくなります。凡例とグラフを視線で往復する必要もあり、色を正確に識別できないと系列を判断できません。

改善後

• 一方を実線、もう一方を破線にする
• 線上や終点へ「売上A」「売上B」と直接表示する
• 点の形を丸・四角などで変える
• 線を太くし、背景とのコントラストを確保する
• 数値の一覧表も併記する

色を変えるだけでなく、線種・形・文字を併用します。色覚多様性に配慮したカラーパレットを使う場合も、配色だけに頼らないことが重要です。

失敗例2：必須項目とエラーを赤色だけで示す

改善前

必須項目の文字だけを赤くし、入力エラーがある欄は枠線だけを赤くします。画面上部には「赤字の項目を確認してください」と表示します。

赤色を識別しにくい場合、どれが必須で、どの欄にエラーがあるのかわかりません。また、色を見分けられる人にも、修正方法が伝わらない表示です。

改善後

• 項目名へ「必須」の文字を表示する
• エラー欄へ警告アイコンを添える
• 「電話番号は半角数字で入力してください」のように修正方法を書く
• エラーメッセージを該当する入力欄とコード上でも関連づける
• 送信後は最初のエラーへ移動し、エラー件数も伝える

色＋アイコン＋具体的な文言を組み合わせます。「赤い箇所」のように色名だけで案内しないこともポイントです。

失敗例3：予約状況を赤・緑の丸だけで示す

改善前

予約カレンダーで、緑の丸を「空きあり」、赤の丸を「満席」とし、色だけで状態を区別します。

色が似て見えると、空きと満席を取り違える可能性があります。小さな丸はスマートフォンでも見分けにくく、凡例を覚えておく負担も生じます。

改善後

• 「○ 空きあり」「△ 残りわずか」「× 満席」と文字で表示する
• 記号だけでなく、画面上または読み上げでも状態名を伝える
• 空き枠は選択でき、満席は選択できないことを操作上も区別する
• 選択中の枠にはチェックマークや太い境界線を加える
• 凡例を予約表の近くに置く

状態表示では、利用者が色を正確に言い当てられるかではなく、次に予約操作を進められるかを確認します。

失敗例4：本文中のリンクを色だけで示す

改善前

本文中のリンクだけを青くし、下線やアイコンを付けません。リンク色と本文色の明るさも近い状態です。

色の違いを認識しにくい場合、クリックできる場所に気づけません。リンク色と本文色の差、リンク文字と背景の差は別々に確認する必要があります。

改善後

• 本文中のリンクへ常時下線を付ける
• 「こちら」ではなく「料金表を見る」など目的がわかる文言にする
• キーボードフォーカス時は、枠線など色以外の変化も表示する
• リンク文字と背景のコントラストを確認する
• 下線を消す場合は、本文との十分な明暗差と、ホバー・フォーカス時の追加表示を確認する

常時下線を付ける方法は、色覚特性にかかわらずリンクを見つけやすい、わかりやすい対策です。

失敗例5：地図・ヒートマップを連続した色だけで示す

改善前

混雑度を緑から赤への色の変化だけで示し、「緑に近いほど空いている、赤に近いほど混んでいる」と説明します。

色の境界がわかりにくいと、地域ごとの違いや混雑度を判断できません。赤と緑を使わない別の配色へ変えるだけでは、色だけに意味を持たせる問題が残ります。

改善後

• 「空いている・やや混雑・混雑」の文字を表示する
• 段階ごとに模様や記号を変える
• 地域を選ぶと、数値や状態名を表示する
• 凡例の各段階に数値範囲と名称を付ける
• 同じ情報を表や一覧でも確認できるようにする

色の段階が多いほど、色だけでの判別は難しくなります。重要な判断に使う情報は、数値や状態名でも取得できるようにします。

コントラスト比は「文字」と「図形」を分けて確認する

色覚配慮では、色以外の手がかりに加えて、背景との明るさの差も確認します。WCAG 2.2レベルAAでは、主に次の値が目安です。

• 通常の大きさの文字と背景：4.5:1以上
• 大きな文字と背景：3:1以上
• 入力欄の境界、アイコン、グラフの意味のある線や図形：隣接する色との間で3:1以上

ただし、コントラスト比を満たせば、色だけで状態を示してよいわけではありません。たとえば、エラーを赤、正常を緑だけで示す場合、丠方が背景と十分なコントラストを持っていても、どちらがエラーかを色以外で判断できません。

一方、要素を区別するために色相だけでなく大きな明暗差を使い、隣り合う色のコントラスト比が3:1以上ある場合は、その明暗差が追加の視覚的な手がかりとして認められることがあります。それでも、正確な色名や色の種類を判断する必要がある場面では、文字・形・模様などを追加します。

色覚シミュレーションを使った確認手順

1. 先に「色を消しても伝わるか」を確認する

画面をグレースケールにし、グラフ、フォーム、状態表示、リンクを区別できるか確認します。区別が消えた場合は、ラベル・形・模様を追加します。

2. 複数の色覚特性をシミュレーションする

Chrome DevToolsのRenderingパネルやFirefoxのアクセシビリティインスペクターには、複数の色覚特性を模擬する機能があります。一つのシミュレーションだけで判断せず、利用できる複数の設定を確認します。

3. コントラスト比を数値で測る

文字と背景、UI部品と周囲、グラフの線と背景をそれぞれ測ります。シミュレーションで違いが見えたように感じても、数値による確認を省略しないようにします。

4. 通常時以外の状態も確認する

エラー、成功、選択中、無効、ホバー、キーボードフォーカスなど、操作によって変わる状態を確認します。通常画面だけを検証しても、重要な問題を見落とします。

5. 実際の端末と利用者でも確認する

スマートフォン、屋外、画面の明るさを下げた状態などでも確認します。可能であれば、色覚特性のある人に主要な操作を試してもらいましょう。

シミュレーションは問題を発見する道具であり、当事者による確認の代わりではありません。また、一人の当事者が使えれば全員に使える、という意味でもありません。

比較画像そのものもアクセシブルにする

見え方の比較記事では、画像の作り方にも注意が必要です。

• 「左・中央・右」だけでなく、A・B・Cや見出しで各画像を区別する
• 画像内の文字を小さくしすぎない
• 赤い矢印だけに頼らず、番号や囲み線を併用する
• キャプションで、画像から読み取ってほしいポイントを説明する
• 代替テキストには見た目の羅列ではなく、改善前後の違いと結論を書く
• 複雑なグラフの数値は、本文や表でも提供する

「色覚に配慮する記事」の図版が色だけに頼ってしまう——これは、わりと起きがちな小さなコントです。制作時のチェック項目に入れておきましょう。

まとめ：シミュレーションの目的は「再現」ではなく「発見」

Web配色の失敗を減らすポイントは、次の3点です。

• 色だけに意味を持たせず、文字・形・模様を併用する
• 文字、UI部品、図形のコントラストをそれぞれ確認する
• シミュレーション、グレースケール、実機・利用者確認を組み合わせる

シミュレーションの目的は、色弱の人の見え方を決めつけることではありません。色の違いが失われたとき、どの情報が消えてしまうかを発見することです。見つけた問題は、色を変えるだけで終わらせず、色を見分けなくても意味と操作が伝わる形へ直しましょう。

サイト本体を直したうえで、見え方の選択肢を

配色の改善は、ラベル・形・模様の追加、コントラストの確保など、サイト本体の設計が基本です。そのうえで、閲覧者が自分の見え方に合わせて色彩やコントラストを調整できる手段を加えると、配慮の幅を広げられます。

MyLikingは、サイトに1行のタグを追加することで、色彩・配色コントラスト・文字サイズの調整など約20の補助機能を導入できるツールです（月1,650円／年19,800円・税込）。本格改修の前に取り組める、低コストな補助策の一つとして活用できます。

※ MyLikingの導入だけで、障害者差別解消法への対応や、WCAG・JISへの適合が保証されるものではありません。色だけで示したグラフ、ラベルのない状態表示、コントラスト不足など、サイト本体の問題を自動修正するものでもありません。

※ 色彩調整によって見分けやすくなる場合はありますが、すべての色覚特性や画面に対する効果を保証するものではありません。実際のページと利用環境で確認してください。

本格的な見直しの代わりではなく、対応範囲を確認したうえでご活用ください。まずは2週間、無料でお試しいただけます。