メディア・ユニバーサル・デザインとは?【色編】 簡単に解説!

皆さんは何色が好きですか?

「メディア・ユニバーサル・デザイン(MUD)」の色について簡単に分かりやすくお話ししていこうと思います。

色覚障がい者がわかりづらいと感じる色は?

特定の色が判別しづらい「色覚障がい」の方は、日本国内でおおよそ300万人以上。

割合でいうと男性の5%(20人に1人)、女性の0.2%(500人に1人)いるといわれています。

眼の錐体の不具合により、特定の色の違いが分かりづらいことが特徴です。

例えば、茶・赤・緑系統はすべて茶色っぽく見えてしまいます。

また、水色やピンク、紫は薄くグレーがかった青色に見えてしまいます。

こうした不便を解決するためにも、線をつけて区分けしたり、どの配色であれば判別しやすいかなど、配慮できる知識と意識を持っておきたいものですね。

高齢者がわかりづらいと感じる色は?

超高齢社会とも言われる日本では、5人に5人の割合で高齢者(65歳以上)の方がいらっしゃいます。

こうした高齢者の方々が識別しづらい色は、どういったものでしょうか?

特に、「紺と黒」「青と青緑」「赤と赤紫」

そして、白と淡い黄色などの明度差のない色などが判別しづらいと感じるようです。

白内障になると全体がぼんやりと黄色がかり、明度差のない色が識別しづらくなるのです。

高齢者の方に向けて資料やデザインを作る際には、淡い色使いはできるだけ避けるようにしたいですね。

また、高齢者の方と色覚障がい者の方とは、判別しづらい色が異なることを頭においておきましょう。

実例!わかりやすく伝えるための4つのポイント

では、「色を識別しづらい」を解決するために、どんなことができるでしょうか?

これは情報発信の担い手として、ぜひ知っておきたいですよね。

一部ですが、私が最近学んだ工夫の4つのポイントをご紹介します!

ポイント1. 文字にフチをつける

例えば、赤背景に緑の文字は、一部の色覚障がい者の方にとってどちらも茶色っぽく見えてしまい、判別しづらい組み合わせになります。

白フチなどを付けることで、読みやすさはグッと高くなりますね。

ポイント2. 分けて配置・色に模様(柄)をつける

例えば、会社での資料でもよく目にする、円グラフ・棒グラフでは複数の色が隣り合うため、配色によっては区別しづらく、どれがどこを示しているのか非常にわかりにくくなります。

こうした場合は、境目を白線などでセパレート化してあげることで、項目ごとの割合がはっきりします。

また、項目も凡例表記ではなく、グラフ中に直接記載することで、何がどの割合なのか色で判別せずとも認識することができます。

さらに判別化・認識度を上げるために、模様をつける(ハッチング)、明度さをつけるなどがありますが、ここで注意したいポイントが、ひと工夫をやりすぎてはいけないということ。

区別しやすくするために模様を多く、色数を多くすると余計にわかりづらくなってしまいます。

見る人すべてがどうすればわかりやすいか、広い目で考えていきたいですね。

ポイント3. 配色(色の組み合わせ)を考える

淡いピンクと淡い紫が並ぶ、緑とオレンジが並ぶ、となると、色覚障がいの方にとっては同系色であり、区別しづらくなってしまいます。

では、淡いピンク・緑・淡い紫・オレンジの並びだと、どうでしょうか?

シミュレーションを上手く活用して、どの色の組み合わせだと判別しやすいか覚えておきたいですね。

ポイント4. 強調したい文字を太くする・下線を入れる

資料ではよく、大事な部分が赤字で強調されることが多いです。しかし、色覚障がい者にとっては、赤字は茶色っぽく見え、黒字と判別しづらいため、重要な箇所がどこなのか分かりづらくなります。

こうした場合は、強調文字は色だけで違いを表現するのではなく、文字を太くしたり、下線を入れて強調したりといった工夫が必要です。

例えば高齢者でいうと例えば、紺色と黒色の文字の区別がしづらいです。

同様の工夫は勿論のこと、紺色のマゼンタ(M)の割合を下げて、黒との明度差をつけるなどといった工夫も重要です。

こうした4つの工夫が、作ったデザインに必要かどうかシミュレーションを見る方法の1つとして、Photoshopがあります。

[校正] > [校正設定] > [P型(1型)色覚] または [D型(2型)色覚]

[P型(1型)色覚] ・・・ 赤錐体の不具合

[D型(2型)色覚] ・・・ 緑錐体の不具合

デザイン制作時には、ぜひ確認ポイントのひとつとして覚えておきたいですね。