色覚異常の人はどんなデザインに困ってる？ユニバーサルデザインについて考えてみよう！

色覚異常とwebデザインについて考える【ユニバーサルデザイン】

#ユニバーサルデザイン

公開日： 2022.03.02

今日はwebデザインにおけるユニバーサルデザインについて考えてみたいと思います。

ユニバーサルデザインとは

ユニバーサルデザインとは簡単に言うと
年齢、障害などの有無に関わらず「全ての人にとって使いやすいデザイン」になります。

webデザインのユニバーサルデザインで最も気をつけていることが2つあります。
1つはターゲット層に合わせた文字の大きさです。
シニア層が見るサイトでは文字のサイズを18px以上にすることを心がけています。
もう1つは色覚障がい（色覚異常・色弱）を考慮した配色です。

色覚障がいについて

色覚障がい（色覚異常・色弱）を持つ人は、男性の約20人に1人、女性の約500人に1人、日本全体では320万人以上いるとされています。病気や事故など後天的に色の感じ方が変わった人を合わせると約500万人いるといわれています。
女性は珍しい特徴ですが、1クラス40人の場合、クラスに１人はいる計算になります。

webデザインにおいて無視できる数字ではなく、ユニバーサルデザインを目指すべきだと考えます。
今回は色覚障がい（色覚異常・色弱）に焦点を当ててwebデザインを考えていきたいと思います。

色覚障がいの方にインタビューしました

今回は色弱の方はどんな風に世界が見えているのか、どんなデザインが見づらいかインタビューしてみました。

インタビューさせて貰った方：D型（2型）色覚

※D型は先天性色覚障がいの約75％を締めています。
赤近辺の色と緑近辺の色の識別が困難になります。色覚障がいのほとんどがこれらのどちらかのタイプであり、かつては「赤緑色覚異常」と呼ばれていました。

Q.何色が認識できて、何色が認識できないですか？

A.真っ黒と真っ白は認識できます。自分の場合、青もできると思いますが、通常の人の見え方を見たことがないので
ハッキリ認識できてるとは言えません。特に認識できないのは赤と緑です。

Q.色弱で日常生活がし辛いことはありますか？

・信号の色(赤と黄)が区別できない
・お肉が焼けているか焼けてないかわからない(鶏肉豚肉にはかなり恐怖心がある)
・家電やマシン系で小さい赤のランプで点滅していると「危険」緑は「OK」の区別がつかない
・トイレのドアノブで、入ってると赤、空席だと青(古いトイレは緑っぽくなっている)が区別がつかない。
・街灯が信号の高さで並んでいると、どれが信号なの？と一瞬戸惑うことがある
・タバコを買う時に似たパッケージの色違いだと、区別できず番号で言えない。
・スーツや洋服のコーディネイトがうまくできない
・顔色の区別がつかない

Q.webや街や学校などで「こんなデザインはやめて」というものはありますか？

・背景とテキストの明度彩度に差がないデザインは目に止まらないし、読みづらいので読まない事が多い。
・同系色の背景とテキストは目に止まらない
・パステルカラーは敵
・バトロワ系ゲームで敵の姿が発見しづらい。ピンが色で区別するタイプだと分からない。

お話を伺いながら、こういうwebデザインはやめてほしいという参考例を作ってみました。

緑背景と赤文字を使っています。
緑を赤は大体同じよう見えていることが多いので、これだと背景とテキストが同化しています。

テキストに縁取りは見えやすい様です。

このように彩度が低い組み合わせも視認性が悪く、目に止まらないそうです。

一見、おしゃれに見えるこのデザインですが、遠くから見ると一色に見えて
近くで見ると目がガチャガチャしてとても気持ち悪いそうです。

よくある淡い色を使ったデザインですが、色覚異常に淡い色は基本的にNGだそうです。
背景色と賞の識別が難しいそうです。

よく見かけるこういったグラフですが、色で分けているだけのグラフは非常に困るそうです。

こちらも同上で、色のみで分けているため、困るようです。
さらに、彩度が低めなのでとても苦手だそうです。

こちらは隣同士だと同系色(商品2と商品4)もなんとか見分けがつくが、
間に違う色が挟まっているので同系色の区別がつかなくなるそうです。

以上、可読性、視認性の悪いデザインの例でした。

Q.どんなデザインが理想ですか？

・理想を言えば黒と白です。
・色だけで判断させるのではなく、文字やアイコンなど他の判断要素もつけてほしいです。
個人の意見ですが、
通常の色覚を持っている方でも一回全部灰色にして明度だけ変えて円グラフを作ってみてください。
おそらく我々は大体そんな感じに見えてます。遠くのプロジェクターで見ると区別をつけるのが難しいですよね。
でもそこにアイコンや文字をつけると一気に認識できるようになります。
デザインではどうしても色を使わないといけないことの方が多いと思いますが、できるだけ淡い色で区別するのはやめてほしいですね。

具体的に見えやすいバナーを選んでいただきました。