こんにちは。
キャスレーコンサルティングIT部の佐藤と申します。
今回は、視覚障害の一つである色覚異常を持つ方にとって“使いやすいUI”についてご紹介します。
視覚障害とは？
視覚障害とは、視力が低下したり視野が狭まったりすることで、
生活に支障が生じている状態を指します。
視覚障害の程度は様々であり、行政上の分類として視力の程度により
等級が1級から6級までに分類されています。
また、見え方も視力障害、視野障害、光覚異常など様々で、今回扱う色覚異常はその一つです。
色覚異常の見え方
色覚異常とは、主に先天的な要因で、特定の色の区別ができない、
あるいは他の人と色の見え方が異なる視覚障害の一つです。
日本人では、男性の20人に一人、女性では500人に一人の割合で色覚異常の人が存在し、
色覚異常の保因者は、女性の10人に1人の割合になるそうです。
色覚異常は、それほどまれな症例ではないのです。
色覚異常は、大きく3つのタイプに分けられ、赤色を感じることが困難なP型色覚、
緑色を感じることが困難なD型色覚、青色を感じることが困難なT型色覚があります。
では、実際に色覚異常者の見え方を体験してみましょう。
色覚異常者の見え方をシミュレーションできるツール（Chromatic Vision Simulator）で、
赤色を感じることが困難なP型色覚者の見え方を、健常者の見え方と比較しました。
左が健常者の見え方、右がP型色覚者の見え方です。
P型色覚では、赤色の部分が茶色っぽく変化していることが分かります。
Webサイトなどでは、テキストの重要な箇所を赤文字で表示しているものをよく見かけますが、
P型色覚者は黒文字と赤文字の違いだけでは、重要な箇所に気づくのが難しく、
文章を理解しづらくなってしまいます。
UIデザイン時のコツ
では、色覚異常者に配慮したUIをデザインする際は、どのようなことに注意すれば良いのでしょうか？
NPO法人カラーユニバーサル機構のガイドラインでは、以下の点に配慮することが推奨されています。
⑴多くの人が見やすい配色を選ぶ
⑵色を見分けにくい人にも情報が伝わるようにする
⑶色の名前を用いたコミュニケーションを可能にする
具体的な例を挙げ、それぞれ説明していきます。
多くの人が見やすい配色を選ぶ
色覚異常者が見て理解しやすいよう、
・明度（色の明暗：明度を上げると白になり、明度を下げると黒になる）
・色相（赤や青など色の種類）
を、調整する必要があります。
例えば、下の2つのボタンはどうでしょうか？
明度差や色相差が大きい右のボタンの方が、字を読み取りやすいのではないでしょうか。
このように、 色の組み合わせには“見分けやすいもの”と、“見分けにくいもの”があります。
カラーユニバーサルデザイン機構による『カラーユニバーサルデザイン推奨配色セットガイドブック』では
どのような色覚の人にも、比較的見分けやすい配色セットを策定しています。
先ほどのような、シミュレーションできるツールを利用して
色覚異常者の見え方を、確認してみるのもよいでしょう。
色を見分けにくい人にも情報が伝わるようにする
文章の重要な箇所は、色の違いだけでは判別するのが困難なので、
太文字にする・下線を引く・テキストサイズを大きくするなどして強調しましょう。
また、色だけでなく模様によって区別する方法も効果的です。
例えばグラフは、以下のように色分けによって情報が表現されていることが多いですが、
色ごとに異なる模様をつけるなど、色に頼りすぎないデザインにしましょう。
色の名前を用いたコミュニケーションを可能にする
色の違いがユーザーにとって重要な役割を持つ操作を取り入れる場合、配慮が必要です。
例えば、ファッションのECサイトでは服の色が見分けられず
欲しかった色と違うものを買ってしまうことがあるそうです。
そういった場合、服の画像だけでなく色名も併記してあるとより分かりやすく、便利になりそうですね。
最後に
いかがでしたか？
様々なコツを紹介しましたが、この他にも健常者がなかなか気づかない改善点はたくさんあると思います。
デザインが完成したら、シミュレーションサイト等で
色覚異常者に伝わりづらい部分はないか？
を、確認してみましょう。
以上です。
最後まで、ご覧いただきありがとうございました。
参考サイト
名古屋市総合リハビリテーション事業団
『色覚障がい者に配慮したWebサイトの作り方』 クリエイターボックス
カラーユニバーサルデザイン機構
日本眼科医会
