色覚多様性に配慮した配色|色だけで伝えない資料の作り方
赤で「注意」、緑で「正常」と塗り分けた資料が、人によっては同じ色に見えていることがあります。見え方の違いは珍しいものではなく、男性では20人に1人ほどと言われます。この記事では、見分けにくい色の組み合わせと、色以外の手がかりを足して誰にでも読める資料・グラフにする方法をまとめます。
色の見え方は人によって違う
人の目には、光の波長に反応する3種類の細胞があります。このうちどれかの働き方が多数派と異なると、特定の色の組み合わせが似た色に見えます。日本では男性のおよそ5%、女性のおよそ0.2%と言われ、40人の教室なら1人はいる計算になります。珍しい特性ではなく、資料を配る相手の中にいるのが普通だと考えたほうが現実的です。
- 多いのは赤と緑の区別がつきにくいタイプで、赤・オレンジ・黄緑・緑が同系統に見えます。
- 青と黄の区別がつきにくいタイプはまれです。
- 色がまったく分からないわけではなく、明るさや鮮やかさの差は伝わります。
- 加齢によって黄ばんだ水晶体で青系が沈むなど、年齢による見え方の変化もあります。
- スマホの画面の明るさ、直射日光、プロジェクターの投影でも色は変わります。
つまり「自分の画面で区別できる」ことは、相手に伝わる保証になりません。配色の工夫は特別な対応ではなく、投影や印刷で色が転んでも壊れない資料を作ることと同じです。色そのものの組み合わせ方の基本は補色とは、ブランドの色を決める手順はブランドカラーの決め方にまとめています。
見分けにくい組み合わせと置き換え
避けたいのは「色相だけが違って、明るさが似ている」組み合わせです。明るさに差があれば、色が似て見えても区別できます。
| 避けたい組み合わせ | 起きること | 置き換え案 |
|---|---|---|
| 赤 × 緑 | 同系統の茶色っぽい色に見える | 青 × オレンジにする |
| 緑 × 茶 | ほぼ同じ色に見える | 片方を濃紺にする |
| 水色 × ピンク | 淡い同色に見える | 濃さを大きく変える |
| 黄緑 × 黄 | 境目が消える | 片方を白抜き+枠線にする |
| 青 × 紫 | 並べると判別しにくい | 紫をグレーに置き換える |
| 赤文字 × 黒背景 | 沈んで読めない | 明るいオレンジか白にする |
迷ったときは、青とオレンジ(または青と黄)を軸にするのが安全です。この2色はどのタイプでも差が残りやすく、白黒にしても明るさの差が出ます。3色以上必要なときは、色相を増やすより「濃い青・水色・オレンジ・グレー」のように明るさの段差をつけて増やすほうが確実です。
色以外の手がかりを足す
配慮の中心は色選びではなく、同じ情報を2つ以上の方法で示すことです。色は補助、形と文字が本体、と考えると判断が簡単になります。
- 1
形やアイコンを添える
○×△、チェックと×、上下の矢印など、色を抜いても判別できる記号を置きます。グラフなら折れ線のマーカーの形を変えます。
- 2
文字を書く
凡例の色と本体を目で対応させるより、グラフの線や棒の横に系列名を直接書くほうが速く正確に読めます。色分けの説明を読む手間もなくなります。
- 3
明るさに差をつける
同系色で塗り分けるときは、濃淡の段差を大きくとります。隣り合う領域の明るさが近いと、境目そのものが見えなくなります。
- 4
位置と順番を固定する
「常に左が前年、右が今年」のように配置を決めておくと、色に頼らず読めます。凡例の並び順とグラフの並び順もそろえます。
- 5
線種やパターンを使う
実線と破線、塗りつぶしと斜線など、印刷しても残る違いを加えます。ただし細かい模様は投影すると潰れるので、粗めのパターンにします。
リンクを色だけで示すのも同じ問題です。本文中のリンクは下線を残す、ボタンは枠と余白で押せると分かるようにする、といった作りにしておくと、色が伝わらない環境でも機能します。
グラフと資料での実践
資料でいちばん事故が起きやすいのが、系列の多い円グラフと、赤緑で塗り分けた表です。系列を減らし、ラベルを直接置くだけで多くは解決します。
| よくある作り | 起きる問題 | 直し方 |
|---|---|---|
| 円グラフに8系列 | 隣の色が似て区別できない | 上位4つ+その他にまとめる |
| 凡例が右端にある | 色を目で往復させる必要がある | 各領域に名前を書き込む |
| 赤字・黒字を赤緑で表現 | 符号が読み取れない | △▲や+−の記号を添える |
| ヒートマップが赤〜緑 | 中間色が同じに見える | 青〜赤など明度が動く配色にする |
| 信号色のステータス表 | 状態が判別できない | 文字(正常・要確認・停止)を入れる |
1日の時間配分のように構成比を見せるグラフでは、円グラフより積み上げ帯や横棒のほうが読み取りやすいことが多いです。項目名をバーの中や横に直接書けるため、色分けが補助に下がります。作り方と使い分けは1日24時間の使い方を円グラフにする方法、記録から配分を見直す手順は時間の使い方を見直す方法にまとめています。
配色を確かめる方法
専用の環境がなくても、手元でできる確認方法があります。完璧な再現ではありませんが、危ない配色のほとんどはこれで見つかります。
- 白黒にしてみる:明るさの差だけが残るので、境目が消える箇所が一目で分かります。
- 白黒印刷する:投影や印刷で配られる資料は、この状態で読めるかが実務上の最低ラインです。
- 縮小して離れて見る:小さくすると色の差は弱まり、明るさの差だけが残ります。
- スマホの画面で開く:明るさやディスプレイの設定で、淡い色は簡単に飛びます。
- 凡例を隠してみる:それでも読めるなら、色以外の手がかりが足りています。
白黒での確認は、色の残像錯視ツールでも代用できます。画像を読み込むと白黒版が作られ、カラー版と切り替えて見比べられるので、手元の図やグラフを入れて境目が消えないかを確かめられます。画像はブラウザの中だけで処理されます。色が目に与える影響そのものに興味があれば、色の残像錯視とはや錯視の種類まとめも読んでみてください。
よくある質問
- 色覚に配慮した配色は何色を使えばいいですか?
- 軸にするなら青とオレンジ(または青と黄)が安全です。どのタイプの見え方でも差が残りやすく、白黒にしても明るさの差が出ます。避けたいのは、赤と緑、緑と茶、水色とピンクのように色相だけが違って明るさが近い組み合わせです。3色以上必要なときは色相を増やすより、濃い青・水色・オレンジ・グレーのように明るさの段差で分けると判別しやすくなります。
- 赤色は資料に使わないほうがいいですか?
- 使って問題ありません。避けるべきなのは、赤という色だけが意味を伝えている状態です。たとえば表の数値を赤字にして「マイナス」を表す場合、△や−の記号を添えれば色が伝わらなくても読めます。エラー表示も同じで、赤い枠に加えてアイコンと文言を置いてください。特に黒や濃い背景の上の赤文字は沈んで読みにくいので、明るいオレンジや白に替えるほうが確実です。
- 自分の資料が見分けにくい配色か確かめる方法はありますか?
- いちばん手軽なのは白黒にしてみることです。色相の差が消えて明るさの差だけが残るため、境目が消える箇所がすぐ分かります。白黒で印刷する、縮小して離れて見る、凡例を隠して読めるか試す、といった方法も有効です。当サイトの色の残像錯視ツールは読み込んだ画像の白黒版とカラー版を切り替えられるので、グラフを入れて確認する用途にも使えます。
- グラフの色分けが多くなってしまうときはどうすればいいですか?
- まず系列そのものを減らせないか検討してください。円グラフなら上位4つと「その他」にまとめると、色の数が一気に減ります。そのうえで凡例に頼らず、各領域や線の横に系列名を直接書きます。どうしても系列が必要な場合は、色相を増やすのではなく明るさの段差で分け、折れ線ならマーカーの形や線種(実線・破線)を変えて色以外の手がかりを足してください。
この記事で紹介したツール
あわせて読みたい
補色とは|色相環で見る反対色の関係と、配色で失敗しない使い方
補色は「色相環で正反対にある色」のことですが、赤の反対がシアンだと説明されることも、緑だと説明されることもあります。この記事では、2つの説明が食い違う理由と、代表的な組み合わせ、配色で使うときの面積比のコツを整理します。
記事を読む →ブランドカラーの決め方|ロゴの色が与える印象と選ぶ手順
有名なサービスのロゴは、形をぼかしても色だけで見当がついてしまいます。それは色が「意味」ではなく「目印」として記憶されているからです。この記事では、色に持たせられる役割と、迷わずブランドカラーを1色に絞るための手順をまとめます。
記事を読む →色の残像錯視とは|白黒画像に色がついて見える仕組みと作り方
色を反転した画像をしばらく見つめてから白黒画像に切り替えると、白黒のはずの写真に色がついて見えます。この記事では、この「負の残像」が起きる理由と、うまく見えるようにするコツ、自分の写真で錯視画像を作る手順をまとめます。
記事を読む →