資料作成に役立つ!知っておきたい色のユニバーサルデザイン

気づきのノート

こんにちは!管理人のハルです。
先日、100円ショップで買い物をしていると、『誰でも見やすい色分けラベル』と書かれた見慣れない配色のシールが目に留まりました。

そこには「カラーユニバーサルデザイン推奨配色セット」の文字。実は、色の見え方は人それぞれ。そのため、誰もが情報を正確に受け取れるようにする色のデザインの工夫、それが”カラーユニバーサルデザイン”です。

この記事では、カラーユニバーサルデザインの基本から、自分が資料作成する際に役立つツールなどをご紹介します。

人はどうやって色を認識している?

色覚と色覚多様性

色の見え方には、色覚が関係しています。色覚とは、色を感じ見分ける力のこと。
眼の網膜には、主に暗いところで働く「杆体(かんたい)」と、主に明るいところで働く「錐体(すいたい)」の2種類の視細胞があります。脳は、この「錐体細胞」が光の波長の違いを受け止めることで、色として認識しています。

画像引用:NPO法人カラーユニバーサルデザイン機構

近年、色覚には多様性があることが分かってきています。そのため、これまで「色盲」「色覚異常」「色覚障害」等と呼ばれた少数派の色覚の人々に対する用語は、その割合から”異常”と表現することは適切ではないとして、2017年に日本遺伝学会が新しく「色覚多様性」という用語を提唱しました。色覚多様性とは、人がもつ多様な色の見え方の違を表す言葉です。

日常生活で困る場面の例

では色の見え方が違うと、日常生活ではどのような場面で困るでしょうか?

例えば、
学校や職場で
・黒板の赤色チョークが見えない
・資料で色分けされた情報がわからない

外出先で
・電車の路線図の色からでは乗る電車がわからない
・色分けされたインフォメーションの字が読めない

自宅で
・肉の焼け具合がわからない
・天気予報の晴れ/曇り/雨の色分け表示がわからない
…といった場面が挙げられます。

いずれも、情報を伝えるために色が使われている場面です。

色覚のタイプと見え方

色覚のタイプ

近年では、色覚はC型、P型、D型、T型、A型の5タイプに分類されています。

タイプ名記号錐体の状態主な特徴頻度(日本人)
C型色覚(正常)C(Common / Cipher)・L:〇
・M:〇
・S:〇
3色で色を識別最も多いタイプ。一般的な色覚。男性:約95%
女性:99%以上
P型(1型)色覚P(Protanopia)・L:×or△
・M:〇
・S:〇
赤が暗く見える。青の感度が低い。男性:約1.5%
D型(2型)色覚D(Deuteranopia)・L
・M×or△
・S
緑を見分けにくい。男性:約3.5%
T型3型色覚T(Tritanopia / Tritanomaly)・L:〇
・M:〇
・S:×or△
青みの差、青と緑、黄と赤が見分けにくい男性:約0.01%以下
A型(1色型)色覚A(Achromatopsia)・L:×or△
・M:×or△
・S:×or△
明暗でしか感じることができない。男性:約0.01%以下

(注)記号の意味…L:L錐体(赤)/M:M錐体(緑)/S:S錐体(青)/×:欠損 /△:弱度/〇:正常

どんな風に見えている?

言葉だけだとわかりにくいので、果物を例に見てみましょう。P型では赤いリンゴ、D型では緑のブドウや洋ナシ、T型ではナシやみかんを見てみるとその違いがわかります。

様々な色覚タイプに対応する配色セット

このように多様な色覚を持つ人が生活する中で、色によって日常生活に支障が生じないように作られたのが、「カラーユニバーサルデザインの配色推奨配色セット」です。

こちらは、東京大学 伊藤啓准教授監修のもと、DIC株式会社・一般社団法人日本塗料工業会・石川県工業試験場・NPO法人カラーユニバーサルデザイン機構などが協力し作成した、合計20色のカラーパレットになっています。

画像引用;NPO法人カラーユニバーサルデザイン機構

文字やサインなど、比較的小さな面積でも見分けやすい高彩度のアクセントカラーが9色、案内図や地図の塗り分けなど広い面積に用いる高明度・低彩度のベースカラーが7色、これらの色と誤認しにくい無彩色4色で構成されています。(*塗装用のみ代替色2色を含む22色)

気を付けたい組み合わせ

ただし、どのタイプの人にも最も見分けやすいというわけではありません。文字や線のような小さな面積で使用する場合には、混同するおそれがある組み合わせもあるので注意が必要です。

画像引用:公文書作成におけるカラーユニバーサルデザインガイドライン(川崎市)
画像引用:公文書作成におけるカラーユニバーサルデザインガイドライン(川崎市)
画像引用:公文書作成におけるカラーユニバーサルデザインガイドライン(川崎市)

作成に役立つおすすめツール

色覚多様性や見え方については分かったけれど、いざカラーユニバーサルデザインに配慮して作成しようとなると難しいですよね。そこで、資料作成時に役立つガイドラインや、自分で作った資料がどう見えるか確認できるツールをご紹介します。

おすすめガイドライン3選

公文書作成におけるカラーUDガイドライン(川崎市)
公文書におけるカラーユニバーサルデザインの取り組みを推進するため、色の見え方の多様性に焦点を当て、必要な知識や具体的な改善例をまとめた川崎市作成のガイドラインです。実際に作成する際の手順がわかりやすく紹介されています。

カラーバリアフリー 色使いのガイドライン サインマニュアル Ver.2(神奈川県)
色による情報提供が識別しづらい方のために、カラーバリアフリーの必要性・重要性を認識し、実務に活かせるよう作成された神奈川県作成のガイドラインです。改善前と後で比較した事例が多く、色を変えることによる見え方の変化が分かりやすくなっています。

わかりやすい印刷物の作り方~ユニバーサルデザインの視点から~(横浜市)
色覚多様性の方に限らず、高齢者やこども、聴覚障がい者など、読者の特性に合わせた情報媒体全般の作成における工夫が紹介された横浜市作成のガイドラインです。色だけでなく、文字や表現方法についても紹介されています。


おすすめシミュレータ3選

・「色のシミュレータ」(無料)
 浅田一憲氏が開発し、iPhone、Andoroid、コンピュータのブラウザなどに対応しています。内蔵カメラや静止画(コンピュータのみ)の動画を CPDT 型に変換し保存することもできます。

指定した色覚タイプのみでも表示できます

・「カラーコントラストアナライザー」 (無料)
 TPGi (旧 The Paciello Group)が開発した、背景色と前景色の組み合わせが十分なコントラストを確保しているかをチェックするツールです。RGBが分からなくても、スポイトで色を抽出できるので、簡単にコントラストをチェックできます。

確認したい文字と色を設定すると、適合or不適合が表示されます

・「Adobe Photoshop」・「Adobe Illustrator」(有料)
アドビシステムズ株式会社が販売するグラフィックアプリケーションソフトウェア「Illustrator」および「Photoshop」を使用している人であれば、CS4以降のバージョンで、標準機能としてシミュレーションツールが搭載されています。

色の意識が資料を変える!「伝わる色使い」への第一歩

いかがでしたか?
”普段自分が見ている世界の色が、ほかの人も同じように見えているとは限らない”ということを覚えておくだけでも、これから資料を作る際に「どんな配色にしようか」「色の組み合わせは良いだろうか」と考えるきっかけになると思います。
色を変えるだけで見やすくなる人が増えるのであれば、どんどん活用していきたいですね。私も、これからは”伝わる色使い”にも気をつけていきたいと思います!

それではまた!

タイトルとURLをコピーしました