学会ポスターと色覚の多様性|誰にでも伝わる配色にする(最終回)
同じポスターを見ても、色の見え方は人によって違います。色覚の特性、年齢による目の変化、見る距離と面積によって、見分けやすい色の組み合わせが変わります。最終回では、見え方の違いが起こる場面を整理し、誰にでも伝わる配色にするための手がかりの重ね方を解説します。
— 色覚の多様性と加齢に配慮した配色
原則 1会場には、色の見え方が違う人がいる前提で作る
日本では、男性の約20人に1人(約5%)、女性の約500人に1人(約0.2%)が、赤と緑の区別がつきにくい色覚の特性を持つといわれます(ポサコデザインシリーズ①の第4回)。100人が通るポスター会場なら、数人はこの特性を持つ人がいることになります。
色覚の特性は、色が見えないということではありません。特定の色の組み合わせが見分けにくいということです。見分けにくい組み合わせを避け、色以外の手がかりを添えれば、伝わり方は大きく変わります。
原則 2見分けにくい組み合わせを知っておく
赤と緑の区別がつきにくい特性では、次のような組み合わせが見分けにくくなります。
| 見分けにくい組み合わせ | ポスターで起こりやすい場面 | 代わりの組み合わせ |
|---|---|---|
| 赤と緑 | 「改善=緑、悪化=赤」の色分け、2群の折れ線 | 青と橙 |
| 緑と茶・橙 | 地図や組織像の塗り分け | 青と橙、明るさの差を大きく取る |
| 青と紫 | 系列の色分け | 青と橙、青とグレー |
| ピンクと灰・水色 | 強調と強調しない要素の区別 | 濃い橙とグレー |
| 赤と黒 | 黒い本文の中の赤い強調 | 太字を併用する、マーカーにする |
いずれも、色相が違っても明るさが近いと特に見分けにくくなります。2色を使い分けるときは、色相だけでなく明るさにも差を付けます(第2回)。
2色が実際にどう見えるかを、色覚の型ごとに並べると次のようになります。
原則 3年齢とともに、青と暗い色が見分けにくくなる
目の中のレンズ(水晶体)は、年齢とともに少しずつ黄色みを帯びます。そのため、青い光が届きにくくなり、次の組み合わせが見分けにくくなります。
- 黒と濃い青、暗い灰と青(濃い青の地に黒い文字など)
- 白と黄(白い地に黄色の文字・線)
- 淡い色どうし(淡い青と淡い紫など)
ポスター会場には、指導教員や審査に当たる方など、幅広い年代の読み手がいます。高齢の方に読みにくい表示は、暗い場所や短い時間で見るときには、誰にとっても読みにくい表示です。濃い青の帯の上の文字は白にする、黄色は文字ではなくマーカーに使う、といった選び方で避けられます。
原則 4小さな面積では、色の違いが分からなくなる
色の違いは、面積が小さくなるほど分かりにくくなります。特に黄と青の違いは、小さな点や細い線では感じにくくなります。色覚の特性がない人にも起こることです。
- 凡例の小さな四角や、散布図の小さな点に、似た色どうしの区別を担わせない
- 色で区別する要素は、線を太く、点を大きくする(第4回)
- 名前を要素の脇に直接書けば、色が見分けにくくても読める(ポサコデザインシリーズ②の第2回)
原則 5手がかりを重ね、作った後に確かめる
色の見え方の違いへの配慮は、特別な配色を選ぶことではありません。色に加えて、もう1つ以上の手がかりを重ねることです。
作った後は、色の見え方を再現するツールで確かめます。白黒で印刷して読み分けられるかを見るのも、簡単で有効な確認です(第2回)。
| ツール | できること |
|---|---|
| Adobe Color(無料の Web アプリ。color.adobe.com) | アクセシビリティツールで、配色を1型・2型・3型の見え方で確かめ、見分けにくい組み合わせを示す。コントラストチェッカーで、文字と背景の明るさの比も確かめられる |
| Photoshop・Illustrator | 表示メニューの「校正設定」から、P型(1型)・D型(2型)の見え方で紙面や図を表示できる。図を作る段階で確かめられる |
| ポスター配色シミュレーター(ポサコ・無料) | 紙面の配色を選び、色覚の特性ごとの見え方を確かめられる |
シミュレーターの見え方は近似です。最後は、白黒の印刷と、明るさ・形・名前の手がかりがそろっているかで確かめます。
色覚の特性に配慮して作られた配色セットは、色どうしが見分けやすいように選ばれています。けれども、セットの色をすべて使えば、色の数が増え、強調が分からなくなります(第3回)。配慮した配色セットからも、使うのは強調の1色と、必要な区別の分だけにします。
今日からできるチェックポイント
- 赤と緑、緑と茶、青と紫などの組み合わせで、情報を区別していないか
- 2色を使い分けるとき、明るさにも差を付けているか
- 色に加えて、形・線の種類・名前のどれかを重ねているか
- 濃い青の地に黒い文字、白い地に黄色の文字を使っていないか
- 小さな点や細い線に、似た色どうしの区別を担わせていないか
- Adobe Color などのシミュレーターか白黒の印刷で、作った後に確かめたか
紙面の見え方を、色覚の特性ごとに確かめる
- ポスター配色シミュレーター — 紙面の配色と、色覚の特性ごとの見え方を確かめられます(無料)。
- PDF 出力 — 書き出した PDF を白黒で印刷すると、明るさの差が足りているか分かります。
本シリーズでは、色の三属性、明るさの差、誘目性、対比と同化、面積と光、見え方の多様性の6つの角度から、ポスターの色の選び方を解説しました。紙面の色の本数と量は、ポサコデザインシリーズ①の第4回「配色:基本は2色、図の色は別に考える」、図の中の色は、ポサコデザインシリーズ②の第4回「グラフの配色:強調は1色でいい」で確かめられます。
※本記事の図は、ポサコの作例用に自作したものです。研究データはすべて架空です。色覚特性の割合は、日本で一般に引用される概数です。色覚の見え方の図は、Machado, G. M., Oliveira, M. M., & Fernandes, L. A. F. (2009). A physiologically-based model for simulation of color vision deficiency. IEEE Transactions on Visualization and Computer Graphics, 15(6), 1291–1298 の方法(重度)で計算した近似です。