色だけで伝えていない？ 色覚多様性に配慮したグラフ・資料の作り方

会議室の画面では、赤い線と緑の線がきれいに分かれて見えました。ところが、配布用に白黒印刷すると二本はほとんど同じ灰色です。別の人の画面では色が沈み、プロジェクターでは境目がぼやけました。凡例の色を見比べないと、どちらが「達成」でどちらが「未達」なのか分かりません。

このとき問題なのは、色を使ったことではありません。色だけに意味を任せたことです。色は注意を向け、まとまりをつくる便利な手がかりです。しかし、見え方は色覚、年齢、画面、照明、印刷によって変わります。意味を色相だけに載せると、どこか一つの条件が変わっただけで情報が消えてしまいます。

この記事では、赤と緑の置き換えだけに終わらず、グラフや資料を色・言葉・形・線・位置の組み合わせで設計する方法を解説します。結論、科学的根拠、配色の選び方、修正例、検査手順、根拠の限界まで順に見ていきます。

結論：色を消すのではなく、色以外にも意味を持たせる

色覚多様性に配慮した資料の基本は、「見分けやすい色を探すこと」だけではありません。次の四つをそろえることです。

1. 状態や系列を言葉で示す：「赤」「緑」ではなく、「遅延」「予定通り」と書く
2. 形や線種を重ねる：丸・三角・四角、実線・破線・点線を使い分ける
3. データの型に合う配色を選ぶ：大小、基準からの差、種類の違いを同じ方法で塗らない
4. 使われる条件で検査する：白黒、小画面、投影、印刷、色覚シミュレーションで確かめる

色は残して構いません。色を好ましく見せる役、注意を向ける役、まとまりを感じさせる役として使いながら、判断に必要な意味は別の手がかりでも読み取れるようにします。これは「色を使わない資料」ではなく、色が働けないときにも壊れない資料です。

なぜ「見えている色」は人によって同じではないのか

色の見え方には個人差があります。よく知られているのは赤と緑の一部を区別しにくい色覚特性ですが、見分けにくい組み合わせや程度は一様ではありません。Bang WongはNature Methodsの解説で、赤緑の組み合わせが多くの図で問題になることを示し、色覚多様性を前提にした配色を勧めています。

しかし、色覚特性がない人なら常に読めるわけでもありません。プロジェクターの明るさ、会議室の照明、低品質な印刷、画面の色調整、図の小ささによって、明度の近い色は簡単に似て見えます。スマートフォンで縮小された凡例と線を往復する場面では、色を正しく見分けられても、どの色がどの系列かを保持する負担が生まれます。

ウェブアクセシビリティの国際的な基準であるWCAG 2.2の達成基準1.4.1は、情報、行動、応答、視覚要素の区別を、色だけで伝えないよう求めています。W3Cの解説が挙げる方法は、色に形や文字を加えることです。色を禁止する規準ではなく、色を唯一の入口にしない規準です。

WCAGはウェブを対象にした規準ですから、紙の提案書や投影スライドへそのまま適合判定を広げることはできません。それでも、「重要な意味を一つの感覚的な差だけに預けない」という原則は、資料設計にも役立ちます。環境が変わっても情報が残るからです。

見分けやすい色でも、色だけに頼ると壊れる

色覚多様性への対応というと、赤をオレンジへ、緑を青へ置き換える作業だと思われがちです。見分けやすい組み合わせを選ぶことは大切です。Ichiharaらは、複数の色覚型で識別しやすい四色の組み合わせを検討し、実用的な配色の研究を報告しています。

ただし、推奨色を使っただけでは、資料の意味まで保証されません。二つの色が見分けられても、凡例が遠ければ何を表すか分かりません。系列が八本あれば、色名を覚えて線を追う負担が増えます。白黒印刷では別の色が近い灰色に変わることもあります。

したがって、配色は第一段階です。第二段階で、重要な差を別の見た目にも割り当てます。折れ線なら線種と点の形、地図なら境界線と模様、表なら記号と語句、入力欄なら枠とエラーメッセージを加えます。これを「赤の人」「緑の人」と色名で説明せず、系列名や状態名で直接読めるようにします。

W3Cの非テキストコントラストの解説は、色相の違いだけでなく明るさの差も、図形や操作要素を見分けるうえで重要だと整理しています。色を変えたつもりでも、明度が同じなら白黒で同化しやすくなります。色相、明度、形を別々に点検する必要があります。

虹色のグラフが、ないはずの境界をつくる

数値の大小を表すとき、青、緑、黄、赤、紫と変わる虹色の配色は華やかです。しかし、数値が同じ幅で変わっても、色の変化は同じ幅に感じられません。黄色の一帯だけが急に明るく見えたり、隣り合う青と緑が似て見えたりします。滑らかなデータに、強い境界や平らな領域があるように感じさせることがあります。

Crameri、Shephard、Heronは、科学コミュニケーションにおける色の誤用を論じ、虹色や赤緑のカラーマップが、知覚の不均一さと色覚多様性の両面で問題になりうると整理しました。色の変化がデータの変化を公平に表さないと、気象、地形、医療画像の判断にも影響します。

Nuñezらは色覚多様性を考慮したカラーマップの最適化を検討し、データを正確に読み取れる配色の必要性を示しました。ここで大切なのは、「虹色は派手だから悪い」という好みの話にしないことです。数値の順序と、見た目の明るさの順序が対応しているかを見ます。

たとえば、売上の低い地域から高い地域までを地図で示すなら、淡い色から濃い色へ一方向に変わる配色が合います。ゼロを中心に増減を示すなら、中立色を中央に置き、両側へ異なる色と明度を広げます。部門A、B、Cのような種類の違いなら、大小を連想させない離れた色を使います。数値の構造と配色の構造を合わせるのです。

データの型を三つに分ける

ColorBrewerは、地図と可視化の配色を「順序」「両極」「区分」の三つに整理しています。グラフや資料でも使える考え方です。

1. 小さいから大きいへ並ぶ「順序」

売上、人数、達成率、温度のように、一方向へ大小が並ぶデータです。基本は一つの色相を中心に、淡い色から濃い色へ明度を変えます。低い値から高い値へ自然に目が進みます。途中で別の色へ飛ぶと、その場所に特別な境界があるように見えるので注意します。

2. 基準から両側へ離れる「両極」

前年差、目標との差、賛成と反対、気温偏差のように、意味のある中央を持つデータです。中央を明るい中立色にし、プラス側とマイナス側へ異なる色を濃くします。赤と緑だけに任せず、プラス・マイナス記号、矢印、数値、ゼロ線も置きます。どちらが良いか悪いかは文脈で変わるため、色の慣習だけで判断させません。

3. 種類が違うだけの「区分」

商品、地域、担当、回答群のように、順序がない分類です。互いに離れた色を使います。ただし、系列が増えるほど識別は難しくなります。重要な二、三系列に絞る、その他を灰色にまとめる、線の終端へ名前を置く、図を小分けにする、といった方法を先に検討します。

色数を増やす前に、そもそも一枚へ載せる系列が多すぎないかを見直します。これは、伸滋Designの伝わる設計マップにある「視覚化・構造化（引き算のデザイン）」の考え方に合います。色を足して解決するのではなく、判断に不要な要素を減らし、残した差を見える形へ整えます。

実務例：赤・黄・緑の進捗表を直す

架空の案件一覧で、進捗を赤・黄・緑の丸だけで示しているとします。作成者は「赤は遅延、黄は注意、緑は順調」と知っています。しかし、初めて見る役員は凡例を探します。赤と緑を区別しにくい人には状態が分かりません。白黒で配られると、三つの丸が同じ灰色へ近づきます。

まず、丸の隣に「遅延」「要確認」「予定通り」と書きます。次に、遅延は上向きではなく警告を示す三角、要確認は丸、予定通りは四角にします。表を重要度順に並べ、遅延を上へ集めます。色は補助として残し、赤、黄、青緑のように明度も違う組み合わせへ調整します。

さらに、役員が知りたいのが「どこへ支援が必要か」なら、状態だけでなく次の行動を置きます。「納期を三日延長」「担当を一人追加」「顧客の回答待ち」のように、判断へ直結する言葉を加えます。色の読み取りを終点にせず、次の行動へつなげます。

折れ線グラフなら、系列の終端へ名前を直接置きます。実線、破線、点線を変え、丸、三角、四角の点を置きます。凡例と線を往復する回数を減らす考え方は、近接適合性原則で決めるダッシュボード設計にもつながります。値の比較そのものには、グラフィカル・パーセプションで選ぶグラフも参考になります。

資料を直す手順：「視覚化・構造化」で意味を分担する

既存の「視覚化・構造化（引き算のデザイン）」を使い、次の順で直します。

1. 色が消えると失われる意味を探す

資料を白黒表示にし、「何が分からなくなるか」を書き出します。赤字だけで修正箇所を示している、色の濃さだけで達成率を示している、線の色だけで担当を示している、といった場所です。色の見た目ではなく、消える意味を特定します。

2. 意味を言葉へ戻す

状態、系列、判断を短い語句にします。「危険な色」ではなく「期限超過」、「青い線」ではなく「既存顧客」、「濃い地域」ではなく「100件以上」と書きます。代替テキストや説明文にも同じ語句を使えるため、資料全体の用語がそろいます。

3. 形・線・位置から一つ選ぶ

同じ意味へ、もう一つの手がかりを重ねます。折れ線なら線種、散布図なら点の形、地図なら模様、表なら記号、状態一覧なら並び順が使えます。全部を同時に変える必要はありません。色がなくても区別できる最小限を選びます。

4. 色をデータの型へ合わせる

順序、両極、区分のどれかを決めてから色を選びます。背景とのコントラスト、隣り合う色の明度差、強調色の面積も確認します。色を多く使うほど安全になるわけではありません。重要でない系列を灰色へ下げ、判断対象へ色を集中させます。

5. 実際の出力で検査する

白黒表示、小画面、会議室の投影、実際のプリンターで見ます。色覚シミュレーターも使いますが、それだけで「誰にでも見える」と結論づけません。可能なら、資料を初めて見る人に「最も遅れている案件はどれか」「二系列の差はどこで広がったか」と問い、答えと所要時間を確かめます。

折れ線の傾きや差が必要以上に強く見える場合は、色だけでなく軸と縦横比も見直します。折れ線グラフの縦横比と軸の設計で扱ったように、配色が正しくても、座標の取り方が印象をゆがめることがあるためです。

色覚多様性に配慮した資料のチェックリスト

意味の設計

• 色をすべて灰色にしても、結論と状態を読み取れる
• 「赤」「青」ではなく、系列名や状態名を本文で使っている
• 重要な区別に、文字・形・線種・位置のいずれかを重ねた
• 凡例と図を何度も往復しなくても系列が分かる
• 強調色が示す意味を、見出しや注記でも説明している

配色の選択

• データを「順序」「両極」「区分」のどれかに分けた
• 虹色を初期設定のまま使っていない
• 赤と緑を唯一の対比にしていない
• 隣り合う色に、色相だけでなく明度の差がある
• 系列が多いとき、色を増やす前に分割や削減を検討した

出力前の検査

• 白黒表示と白黒印刷で確認した
• スマートフォン相当の小ささでも点・線・文字が見える
• 会議室のプロジェクターで背景と図形が埋もれない
• 色覚シミュレーションで区別が残るか確かめた
• 初見の人が、重要な問いへ迷わず答えられた
• 図の代替テキストや本文に、色だけでは分からない意味を書いた

根拠の限界：検査に合格しても、全員に同じように見えるわけではない

色覚には複数の型と個人差があります。あるシミュレーションで見分けられたからといって、すべての人、画面、照明、印刷で同じ結果になるとは限りません。シミュレーターは問題を見つけるための道具であり、利用者の見え方を完全に再現するものではありません。

WCAGのコントラスト基準も、色覚多様性に関する要件のすべてではありません。比率を満たしても、赤と緑のどちらが「良い状態」かを色だけで判断させれば、意味は伝わりません。反対に、色の差が小さくても、直接ラベルと形が明確なら必要な情報を読める場合があります。適合値と実際の課題遂行を分けて考えます。

形や線種を増やせば万能になるわけでもありません。八種類の線と八種類の記号を一枚に載せると、照合の負担が別の形で増えます。系列を減らす、図を分ける、重要な一系列だけを強調するなど、情報量そのものを見直す必要があります。

また、知覚的に均一な配色は、データの変化を比較的公平に見せるための考え方です。危険区域を意図的に強調する、防災情報で段階を明確に区切るなど、目的によっては均一さ以外の判断も必要です。その場合は、区切りの根拠と凡例を明示し、色以外の境界線や語句も加えます。

まとめ：色は入口、意味は複数の手がかりで残す

色は、資料を分かりやすくする強力な手段です。だからこそ、一つの色に状態、大小、種類、重要度のすべてを背負わせないことが大切です。色が変わって見えても、白黒になっても、意味が残る設計へ変えます。

最初の一歩は、資料を白黒にして、失われる意味を見つけることです。その意味を言葉へ戻し、形・線種・位置のどれかを重ね、データの型に合う配色へ整えます。最後に、実際に使う画面、投影、印刷で確かめます。

伸滋Designでは、グラフの見た目を整えるだけでなく、読み手が何を比較し、どの判断へ進むのかから資料を設計します。「色を増やしているのに、かえって読みにくい」「社内画面では見えるのに、顧客先で伝わらない」と感じる場合は、お問い合わせページからご相談ください。

参考文献

1. World Wide Web Consortium. Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 1.4.1 Use of Color. https://www.w3.org/TR/WCAG22/#use-of-color
2. World Wide Web Consortium. Understanding Success Criterion 1.4.1: Use of Color. https://www.w3.org/WAI/WCAG22/Understanding/use-of-color
3. World Wide Web Consortium. Understanding Success Criterion 1.4.11: Non-text Contrast. https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
4. Wong, B. (2011). Points of view: Color blindness. Nature Methods, 8, 441. https://doi.org/10.1038/nmeth.1618
5. Crameri, F., Shephard, G. E., & Heron, P. J. (2020). The misuse of colour in science communication. Nature Communications, 11, 5444. https://doi.org/10.1038/s41467-020-19160-7
6. Nuñez, J. R., Anderton, C. R., & Renslow, R. S. (2018). Optimizing colormaps with consideration for color vision deficiency to enable accurate interpretation of scientific data. PLOS ONE, 13(8), e0199239. https://doi.org/10.1371/journal.pone.0199239
7. Brewer, C. A., & Harrower, M. ColorBrewer 2.0: Color Advice for Cartography. The Pennsylvania State University. https://colorbrewer2.org/learnmore/schemes.html
8. Ichihara, Y. G., Okabe, M., Iga, K., Tanaka, Y., Musha, K., & Ito, K. (2008). Color Universal Design: The Selection of Four Easily Distinguishable Colors for all Color Vision Types. https://jfly.uni-koeln.de/color/ichihara_etal_2008.pdf