色の見え方の違いに配慮した配色|カラーユニバーサルデザインの基本
色の見え方は人によって違う
案内図の色分け、グラフの線、「赤字は必須」という書き方。私たちは、ふだん思っている以上に色に頼って情報を伝えています。ところが、色の見え方は人によって同じではありません。赤と緑、茶と緑などが見分けにくい人がいて、色だけで分けた情報はそのまま届かないことがあります。
この記事では、色の見え方が違う人にも伝わる配色を、ロゴ・資料・案内・ホームページでどう作るかをまとめます。どのくらいの人に関わる話なのか、配色の考え方、すぐに使える手順、仕上げのチェックリストの順に進めます。見え方の仕組みや医学的なことには立ち入らず、作る側の工夫に絞ります。
色そのものの決め方はコーポレートカラーの決め方|色の印象と配色の基本で扱っています。ここでは、決めた色をどう組み合わせ、どう使えば伝わるかを見ていきます。
どのくらいの人に関わる話か
日本眼科学会は、生まれつき色の見え方が違う人の割合を、日本人の男性で約5%、女性で約0.2%としています。NPO法人カラーユニバーサルデザイン機構(CUDO)は、男性の約20人に1人、女性の約500人に1人にあたり、日本に320万人以上いるとしています。
男性が20人いる職場や、男性のお客様が多いお店なら、そのうちの1人ほどが当てはまってもおかしくない計算です。「色弱」と呼ばれてきた人たちで、本人が気にせず暮らしていることも多く、見た目では分かりません。だからこそ、最初から誰にでも伝わる形で作っておくのが近道です。
CUDO では、色の見え方のタイプを C型・P型・D型などと呼び分けています。多くの人が C型で、P型・D型は赤と緑の系統の違いが感じにくいタイプです。
カラーユニバーサルデザインの3つの考え方
色の見え方の違いに配慮した色づかいを、カラーユニバーサルデザイン(CUD)と呼びます。CUDO は、次の3つをポイントとしています。
| 考え方 | 中身 | 例 |
|---|---|---|
| 見分けやすい配色を選ぶ | できるだけ多くの人に見分けやすい色の組み合わせにする | 赤の代わりに朱色やオレンジを使う |
| 色以外でも伝える | 色を見分けにくい人にも、形・文字・線などで情報が伝わるようにする | 凡例の色に「〇〇」と文字を添える |
| 色の名前で話せるようにする | 「赤いボタン」のように色名で伝える場面でも困らないようにする | 色名を書き添える、場所や形でも指す |
いちばん効くのは2つ目の「色以外でも伝える」です。どんなに色を選んでも、色だけで区別させている限り、見分けにくい人は残ります。
配色で気をつけたい組み合わせ
福島県のカラーユニバーサルデザインガイドブックには、見分けにくくなりやすい組み合わせと、その代わりになる色が挙げられています。
| 気をつけたい色・組み合わせ | 起きやすいこと | 代わりの工夫 |
|---|---|---|
| 濃い赤 | 黒やこげ茶と見分けにくい | 朱色やオレンジ寄りの赤にする |
| 暗い緑 | 赤や茶と見分けにくい | 青みの強い緑にする |
| 明るい黄色 | 白やクリームと見分けにくいことがある | 背景との明るさの差をつける |
| 黒・青・緑の背景に赤い文字 | 文字が読みにくい | 背景を明るくするか、文字を白や黄色にする |
| パステル同士 | 明るさが近く、区別がつきにくい | 明るい色と暗い色を組み合わせる |
色の「明るさ」に差をつけるのが大事な点です。色合いが違っても、明るさが近いと見分けにくくなります。反対に、明るさの差がはっきりしていれば、白黒にしても区別できます。
CUDO は、見分けやすさに配慮して選んだ20色の「カラーユニバーサルデザイン推奨配色セット」を公開しています。小さな面積に使うアクセントカラー9色、広い面積に使うベースカラー7色、無彩色4色で、RGB と CMYK の値も載っています。ゼロから色を選ぶより、ここから選ぶほうが確実です。
配色を見直す手順
すでにある資料やサイトを見直すときも、新しく作るときも、次の順で進めます。
- 色で区別させている箇所を洗い出す: グラフの線、地図や表の塗り分け、必須の印、エラーの表示、ボタンの状態、営業日と休業日のカレンダーなど
- 色以外の手がかりを足す: 文字で書き添える、記号や形を変える、線を実線と点線にする、模様(ハッチング)を入れる、境目に線を引く
- 明るさの差をつける: 隣り合う色は、明るい色と暗い色の組み合わせにする
- 色を差し替える: 濃い赤は朱色に、暗い緑は青みの緑にするなど、上の表を参考に置き換える
- 白黒で確かめる: 白黒で印刷するか、画面をグレーにして、区別がつくかを見る
- シミュレーションで確かめる: 画像編集ソフトの色覚シミュレーションやアプリで見分けにくさを見る
- ルールに書き残す: 使ってよい組み合わせと避ける組み合わせを、色の決まりごとに足す
6のシミュレーションについて、CUDO は「見分けにくさ」を確かめるためのもので、その人が見ている色そのものを再現するものではないと説明しています。大事な案内物や地図は、実際に見え方の違う人に見てもらうのが確実です。
媒体ごとの工夫
グラフ: 凡例を離れた場所に置かず、線や棒のすぐそばに項目名を書きます。線を太くし、線ごとに印(丸・三角・四角)を付けると、色に頼らずに読めます。福島県のガイドブックにも、線の横に名前を書き、線を太くし、印を付ける例が載っています。
カレンダーや表: 休業日を赤で示すなら、明るい朱色にして文字を太くし、「休」と書き添えます。
ホームページ: リンクを色だけで示さず下線を付ける、入力の誤りを赤い枠だけでなく文章でも伝える、といった工夫が基本です。サイト全体で求められることはホームページのアクセシビリティ|合理的配慮の義務化とサイトでやることにまとめています。
ロゴ: ロゴは色を変えにくいものですが、白黒で使う版を用意しておくと、どんな場面でも形で見分けがつきます。
東京都の「TOKYOユニバーサルデザインガイドライン(視覚情報版)」も、色の工夫に加えて、文字や記号の併用、図やイラスト、ピクトグラムといった色以外の工夫を挙げています。年齢を重ねて見え方が変わる人もいるため、色以外の手がかりを足すことは、より多くの人に役立ちます。
仕上げのチェックリスト
- 色だけで区別させている情報がない(文字・記号・形・線の種類でも分かる)
- 白黒にしても区別がつく
- 隣り合う色に、明るさの差がある
- パステル同士、暗い色同士を並べていない
- 濃い赤や暗い緑を、区別が必要な場面で使っていない
- 暗い背景に赤い文字を置いていない
- グラフは、線や棒のそばに項目名が書いてある
- 凡例や色分けに、色の名前や文字が添えてある
- 「赤いところ」のように色名だけで指示していない
- 配色の決まりごとに、避ける組み合わせを書き残した
決めた配色のルールは、ブランドガイドラインとは|中小企業が決めておくべき項目と例にまとめておくと、社内の誰が資料を作っても同じ工夫が続きます。
まとめ
- 生まれつき色の見え方が違う人は、日本人の男性で約5%、女性で約0.2%とされる
- いちばん効くのは「色以外でも伝える」こと。文字・記号・形・線の種類を足す
- 隣り合う色は明るさに差をつける。濃い赤は朱色に、暗い緑は青みの緑に
- 白黒やシミュレーションで確かめ、大事なものは見え方の違う人に見てもらう
Lapisデザインラボでは、色・書体・写真の使い方をまとめたブランドガイドが付くプランを用意しています。内容はサービスと料金をご覧ください。
よくある質問
色の見え方が違う人は、どのくらいいるのですか。
日本眼科学会は、生まれつき色の見え方が違う人の割合を、日本人の男性で約5%、女性で約0.2%としています。NPO法人カラーユニバーサルデザイン機構(CUDO)は、日本に320万人以上いるとしています。資料や案内を見る人の中に、一定の割合で含まれていると考えて作るのが基本です。
色弱の人にも見やすい配色にするには、何から始めればよいですか。
まず、色だけで区別させている箇所を探します。グラフの線、地図の塗り分け、必須の印、エラーの表示などです。そこに文字や記号、線の種類、形の違いを足し、明るい色と暗い色を組み合わせると、色の見え方にかかわらず伝わりやすくなります。
作った配色は、どうやって確かめればよいですか。
白黒で印刷して区別できるかを見るのが手軽です。画像編集ソフトの色覚シミュレーションなどで見分けにくさを確かめる方法もあります。ただしシミュレーションは見え方そのものを再現するものではないため、大事な案内物は、実際に見え方の違う人に見てもらうのが確実です。