今回は、「カラーユニバーサルデザイン」についてお話します。「みんなが使えるWEBページ」にするには、色の使い方も大切なのです。

色覚にはタイプがある
人の色覚には多様性があり、いわゆる「色弱」と呼ばれる色覚タイプを持っている方がいます。日本人男性の20人に1人、女性の500人に1人と言われますので、「クラスに２人くらい」は色弱と呼ばれるタイプの方がいることになりますね。

色弱と呼ばれるタイプには主に「C型」「P型」「D型」の３つのタイプがあります。目の網膜には「錐体」と「杆体」の2種類の視細胞があり、さらに「錐体」には、L（赤）、M（緑）、S（青）の3種類あるのですが、それらがズレなく感じているのが「C型」で、多くの人がこのタイプとなります。「P型」は、赤い光を主に感じるL錐体がなかったり分光感度がずれてしまうタイプ、「D型」は緑の光を主に感じるM錐体がなかったり分光感度がずれてしまうタイプです。

どのように配慮すればいい？
たとえば、以下のようなグラフを作ったとします。「C型」の人には「きれいなグラフ」に見えても、「P型」「D型」の人にはわかりづらいグラフになってしまいます。

「色だけで情報を伝える」ことをやめて、引き出し線を入れたり、ハッチング（地紋）を入れると、以下のように誰にでもわかりやすいグラフになります。

ちょっとした工夫をするだけで「みんなが使えるWEBページ」になるのです。

こうした取り組みは「NPO法人カラーユニバーサルデザイン機構」（http://www.cudo.jp/）さんが中心になって、色だけで区別しない地下鉄の路線図、学校の黒板で色弱タイプの子どもたちにも見えやすい色チョークを開発する、などの取り組みを行っています。

それらの動きは自治体でもあります。たとえば札幌市では2016（平成28）年に「広報に関する色のガイドライン」を作成し、カラーユニバーサルデザインへの配慮に努めています。参考にしてみてはいかがでしょうか。

札幌市「広報に関する色のガイドライン」（https://www.city.sapporo.jp/koho/color/index.html）

Photoshopにも機能があります
では実際に色使いについてどのように制作すればいいのでしょうか？　画像ソフトPhotoshopの表示 > 校正設定から「P型（1型）色覚」または「D型（2型）色覚」で見え方をチェックすることができます。Illustratorなどにも同じ機能があります。作成した画像が「P型」「D型」の人にどう見えるか確認してみて下さい。

また、背景色と文字色のコントラストを確認できるサイトもあります。（https://colorable.jxnblk.com/）

皆さんがWEBサイトを作るとき、「みんなが使えるWEBページ」を意識していただければと思います。