色覚多様性に配慮したデザイン｜配色のコツとUD事例
色は情報を伝える強力な手段ですが、色の見え方は人によって異なります。日本人男性の約5%、女性の約0.2%は、一般的な色覚とは異なる色の見え方をしているとされています。デザインにおいて色覚の多様性に配慮することは、すべての人に正確な情報を届けるための基本です。この記事では、色覚特性の種類から、配色で気をつけるべきポイント、ユニバーサルデザインの実践例までを解説します。
色覚特性の基本知識
色覚多様性について正しく理解するために、まず人がどのように色を認識しているかを確認しましょう。
人の色覚のしくみ
人の目の網膜には、色を感じるための3種類の錐体細胞があります。
| 錐体の種類 | 感知する波長帯 | 対応する色 |
|---|---|---|
| L錐体（長波長） | 約560nm付近 | 赤付近 |
| M錐体（中波長） | 約530nm付近 | 緑付近 |
| S錐体（短波長） | 約420nm付近 | 青付近 |
これら3つの錐体からの信号の比率によって、私たちは多様な色を識別しています。いずれかの錐体の機能が異なると、色の見え方が変わります。
色覚特性の種類と割合
色覚特性には主に以下の種類があります。
| 名称 | 特徴 | 頻度（日本人男性） |
|---|---|---|
| C型（一般色覚） | 3つの錐体が一般的に機能 | 約95% |
| P型（1型色覚） | L錐体の機能が異なる | 約1.5% |
| D型（2型色覚） | M錐体の機能が異なる | 約3.5% |
| T型（3型色覚） | S錐体の機能が異なる | 非常にまれ |
| A型（1色覚） | 錐体がほとんど機能しない | 非常にまれ |
P型とD型を合わせると、日本人男性のおよそ5%に相当します。世界全体では男性の約8%とされ、40人のクラスに1〜2人はいる計算になります。決してまれな特性ではありません。
P型・D型の色の見え方
P型とD型では、赤と緑の区別が難しくなる傾向があります。ただし「赤と緑がまったく見えない」わけではなく、特定の色の組み合わせにおいて区別しにくくなるという点が重要です。
| 色の組み合わせ | C型での見え方 | P型・D型での見え方 |
|---|---|---|
| 赤と緑 | 明確に区別できる | 類似した色に見える場合がある |
| 赤とこげ茶 | 異なる色に見える | 非常に近い色に見えることがある |
| 緑と茶 | 異なる色に見える | 区別しにくい場合がある |
| ピンクと灰色 | 明確に違う | 近く見えることがある |
| 水色とピンク | 明確に違う | 区別しにくいことがある |
問題が起きやすい配色パターン
デザインの現場で特に注意が必要な配色パターンを具体的に見ていきましょう。
赤と緑の組み合わせ
最も代表的な問題パターンです。信号機の色は赤と緑ですが、形状や位置で補助的に区別できる設計になっています。
| 使用場面 | 問題のある配色 | 改善例 |
|---|---|---|
| グラフの凡例 | 赤 #E53935 と 緑 #43A047 | 赤 #E53935 と 青 #1E88E5 |
| OKとNGの表示 | 緑文字と赤文字のみ | 色に加えて丸とバツの記号を付与 |
| 地図の区分 | 赤系と緑系の塗り分け | 赤とオレンジ、青と紫など明度差のある組み合わせ |
暖色同士・寒色同士の微妙な差
彩度や明度が近い同系色は、色覚特性を持つ人にとって区別しにくくなることがあります。
| 避けたい組み合わせ | 理由 | 代替案 |
|---|---|---|
| オレンジ #FB8C00 と 黄緑 #9ACD32 | 彩度が似ている | オレンジと青を使う |
| ピンク #EC407A と ライトグレー #BDBDBD | P型で近く見える場合がある | ピンクとダークグレー #616161 |
| 緑 #43A047 と 茶 #795548 | D型で近く見える場合がある | 青 #1E88E5 と 茶 #795548 |
背景色と文字色のコントラスト不足
色覚特性の有無にかかわらず、コントラスト比は読みやすさの基本です。
| 基準 | コントラスト比 | 対象 |
|---|---|---|
| WCAG AA（通常テキスト） | 4.5:1以上 | 本文テキスト |
| WCAG AA（大きなテキスト） | 3:1以上 | 見出し（18pt以上） |
| WCAG AAA | 7:1以上 | より高いアクセシビリティ |
配慮した配色のコツ
色覚多様性に配慮したデザインは、実は全員にとってわかりやすいデザインでもあります。ここでは実践的なコツを紹介します。
コツ1: 明度差を確保する
色相の違いだけでなく、明度（明るさ）の差を十分にとることが最も効果的な対策です。
| ペアリング | HEX | 明度差 | 評価 |
|---|---|---|---|
| 濃い青 + 薄い黄 | #1A237E + #FFF9C4 | 大きい | 良好 |
| 黒 + 白 | #212121 + #FFFFFF | 最大 | 良好 |
| 赤 + 緑 | #E53935 + #43A047 | 小さい | 要改善 |
| 赤 + 濃紺 | #E53935 + #0D47A1 | 中程度 | 注意が必要 |
明度差を確認する簡単な方法として、デザインをグレースケールに変換してみるのが有効です。グレースケールで区別がつかない配色は、色覚特性を持つ人にも区別しにくい可能性があります。
コツ2: 色だけに頼らない情報伝達
色を使って情報を区別する場合は、必ず色以外の手段も併用しましょう。
| 手段 | 具体例 |
|---|---|
| パターン・テクスチャ | グラフの棒に斜線、ドット、格子などを付ける |
| アイコン・記号 | 成功にチェックマーク、エラーにバツ印 |
| テキストラベル | 凡例だけでなく直接データにラベルをつける |
| 形状の違い | 折れ線グラフで丸、三角、四角のマーカーを使い分ける |
| 太さ・線種 | 実線、点線、破線で系列を区別 |
コツ3: カラーユニバーサルデザイン推奨配色
カラーユニバーサルデザイン機構（CUDO）が推奨するバリアフリー配色セットを参考にすると、多くの人にとって区別しやすい配色を選べます。
| 色名 | HEX | 用途の例 |
|---|---|---|
| 赤 | #FF4B00 | エラー、警告 |
| 黄 | #FFF100 | 注意、ハイライト |
| 緑 | #03AF7A | 成功、許可 |
| 青 | #005AFF | リンク、情報 |
| 空色 | #4DC4FF | サブカテゴリ |
| ピンク | #FF8082 | 女性向け、注目 |
| オレンジ | #F6AA00 | 注目、中間状態 |
| 紫 | #990099 | 特殊、創造性 |
これらの色はP型・D型の色覚特性を持つ人にも区別しやすいよう設計されています。ただし、すべての場面で万能というわけではないため、実際のデザインではシミュレーションツールでの確認が推奨されます。
ユニバーサルデザインの実践事例
実際のプロダクトやサービスにおける色覚多様性への対応事例を見てみましょう。
Webデザインでの対応
Webサイトやアプリケーションでは、以下のような対応が実践されています。
| 対象 | 対応方法 |
|---|---|
| フォーム | エラー表示を赤色だけでなく、アイコンとテキストメッセージで補強 |
| グラフ | 色に加えてパターンやラベルを併用 |
| リンク | 色の変化だけでなく下線を維持 |
| ステータス表示 | 色付きバッジにテキストラベルを付加 |
| ボタン | ホバー時に色以外の変化（影、サイズ）も加える |
公共サインでの工夫
日本の公共空間では、近年さまざまな配慮が進んでいます。
| 場所 | 工夫の内容 |
|---|---|
| 鉄道路線図 | 路線ごとに色だけでなく記号や番号を付与 |
| 信号機 | LED化に伴い、色の視認性を向上。青みがかった緑を採用 |
| ハザードマップ | 危険度を色に加えて等高線やパターンで表現 |
| トイレ表示 | 赤と青だけでなく形状やピクトグラムで区別 |
教育現場での取り組み
学校教育においても色覚多様性への理解と配慮が広がっています。
| 取り組み | 内容 |
|---|---|
| チョークの色 | 赤チョークの代わりに朱色や白を使用 |
| プリント資料 | カラーで区別する場合は記号やテクスチャを併用 |
| グラフ作成指導 | 色だけで区別しないグラフの作り方を指導 |
デザインツールでの確認方法
配色が色覚多様性に配慮できているかを確認するためのツールや方法を紹介します。
シミュレーションツール
| ツール名 | 種類 | 特徴 |
|---|---|---|
| Adobe Color | Web | アクセシビリティチェック機能内蔵 |
| Sim Daltonism | macOSアプリ | リアルタイムで画面をシミュレーション |
| Color Oracle | デスクトップアプリ | Windows/Mac/Linux対応の無料ツール |
| Figmaプラグイン | デザインツール | デザイン段階でP型・D型をシミュレート |
チェックリスト
デザインを公開する前に、以下の項目を確認しましょう。
| チェック項目 | 確認内容 |
|---|---|
| グレースケール変換 | 白黒にしても情報の区別がつくか |
| 色のみの情報伝達 | 色だけで意味を伝えている箇所はないか |
| コントラスト比 | WCAG AA基準（4.5:1）を満たしているか |
| シミュレーション | P型・D型シミュレーションで問題がないか |
| テキストラベル | グラフや図にテキストラベルがあるか |
日本における取り組みの歴史
日本での色覚多様性への対応は、少しずつ進展してきました。
用語の変遷
かつて「色盲」「色弱」と呼ばれていた色覚特性の名称は、近年では「色覚多様性」「色覚特性」など、多様性を尊重した表現に変わりつつあります。これは単なる言い換えではなく、「異常」ではなく「多様性の一つ」であるという認識の変化を反映しています。
制度面の変化
| 年代 | 出来事 |
|---|---|
| 2002年 | 学校保健安全法施行規則改正により、学校での色覚検査が必須項目から削除 |
| 2003年 | 労働安全衛生法の改正で、採用時の色覚検査が原則廃止 |
| 2014年 | 学校での色覚検査について、希望者への検査実施を推奨する通知が出される |
| 2017年頃〜 | 「カラーユニバーサルデザイン」の概念が公共機関に普及 |
JIS規格への反映
2018年にJIS安全色（JIS Z 9103）が改正され、色覚多様性に配慮した安全色が規定されました。これにより、公共施設や工場などの安全表示で使われる色が、より多くの人に識別しやすいものに更新されています。
Web制作での実装ポイント
Webサイトを制作する際に、色覚多様性に配慮するための具体的な実装ポイントを整理します。
CSSでの対応
| ポイント | 具体策 |
|---|---|
| リンク色 | 色だけでなくtext-decorationで下線を付ける |
| フォーカス表示 | outline を消さず、色以外の視覚的変化を確保 |
| エラー表示 | border-colorの変更に加えて、アイコンとメッセージを併用 |
| ダークモード | ダークモードでもコントラスト比を維持する |
HTMLでのセマンティクス
支援技術（スクリーンリーダーなど）への対応も含め、適切なHTMLセマンティクスを使うことが色覚多様性への配慮とも結びつきます。例えば、エラーメッセージにはrole=“alert”を付与し、色だけに頼らない情報伝達を心がけましょう。
テスト方法
| テスト手段 | 方法 |
|---|---|
| ブラウザDevTools | ChromeのRendering設定で色覚シミュレーションが可能 |
| Lighthouse | アクセシビリティスコアでコントラスト比を自動チェック |
| 手動確認 | 画面をグレースケールにして情報が伝わるか確認 |
まとめ
色覚多様性への配慮は、特別な対応ではなく、すべての人にわかりやすいデザインを実現するための基本的な姿勢です。日本人男性の約5%、つまり20人に1人は一般とは異なる色の見え方をしています。赤と緑の組み合わせを避ける、明度差を十分に確保する、色だけに頼らず記号やテキストを併用するといった対策は、どれも実装のハードルが高いものではありません。デザインの段階からシミュレーションツールで確認する習慣をつけることで、より多くの人に正確に情報が伝わるデザインを実現できるでしょう。