多様な色覚に配慮したUIを考える
この記事は「DHU Kuriyaゼミ Advent Calendar 2024」12月14日の記事です。
皆さん、こんにちは！
アドベントカレンダー2024ということで、2024年に経験した出来事とWebのUIデザインを絡めたお話しをしたいと思います！
私は今年、運転免許を取得しました。
その際、適性試験があり、「視力」や「色彩識別」の試験があります。
色彩識別の試験は次のような理由で実施されています。
赤色、青色、黄色の識別ができるかどうかがチェックされます。これらの色は、交通信号や標識に頻繁に使用される色であり、その識別が運転安全性に直接影響を与えるからです。例えば、赤色は一般的に停止を意味し、青色は進行方向を、黄色は注意を促すサインとして用いられます。
運転免許の取得において、色彩識別検査は交通信号や標識といった「色の言語」を正しく認識し、適切な行動を取るための重要な確認項目です。
この考え方は、WebのUIデザインにも通じる部分があるのではないでしょうか？
Webサイトやアプリケーションにおける色の役割
WebサイトやアプリケーションのUIでは、ボタンやアラートなどで色を適切に活用することが、ユーザビリティやアクセシビリティに直結します。
例えば、下記のように色を用いることができます。
青色 (緑色) : 特に問題がない場合など、正常であることを伝える。
黄色 : 注意喚起や途中のステータス(処理中、支払い確認中など)を伝える。
赤色 : エラーや警告を示し、ユーザーに再確認が必要であることを伝える。
今回は例として、パスワードの入力フォームを用意しました。
パスワードに文字数や大文字、小文字、数字、記号を組み合わせているか、などの入力規則を定めているサイトで見かけることがありますよね！
こちらのパスワードの入力フォームを用いて、さまざまな色覚で見ていきます。
色覚の再現
実は、Google Chromeの機能で色覚をエミュレートすることができます。
今回は、下記の4つの色覚をエミュレートし、先ほどのパスワードの入力フォームを見ていきます。
※色覚の名称はGoogle Chromeの表記に従って記載します。
1型2色覚（赤色の識別不可）
2型2色覚（緑色の識別不可）
3型2色覚（青色の識別不可）
色覚異常（色の識別不可）
エミュレート結果
それぞれ、結果は次の通りになりました。
今回のサンプルで使用したパスワードの入力フォームの場合、次のような見え方になるかもしれません。
1型2色覚（赤色の識別不可）: 緑色や赤色が識別できず、要件を満たしているパスワードなのか判断できない
2型2色覚（緑色の識別不可）: 緑色や赤色が識別できず、要件を満たしているパスワードなのか判断できない
3型2色覚（青色の識別不可）: 黄色が識別できず、要件を満たしていない、または、セキュリティ上はもう少し複雑にすべきパスワードなのか判断できない
色覚異常（色の識別不可）: 緑色や黄色、赤色が識別できず、入力しているパスワードがどのようなステータスなのか判断できない
このように、色覚によっては、伝えたいことが正しく伝わらない可能性があることが分かりました。
多様な色覚に配慮するにはどうすれば良いのか
では、どのようなUIであれば、多様な色覚に配慮できるのでしょうか？
例えば、色の組み合わせを変えて識別可能な色を用いることで、少しだけ色覚に配慮できます。
先ほどのGoogle Chromeの機能を使うことで、色の組み合わせを探ることはできそうです。
しかし、「色覚異常（色の識別不可）」への配慮は難しいかもしれません。
本記事の冒頭で、「色の言語」という表現を使用しました。
これを例えるなら、「言葉が通じない国を訪れた際に、身振り手振りでなんとか意思を伝えようとする状況」に似ているかもしれませんね！
言葉が通じなくても、ジェスチャーや表情を工夫することで最低限のコミュニケーションを取れるようにする。
これと同様に、UIデザインでも、色だけに頼らずラベルやアイコンといった「別の手段」を取り入れることで、多様な色覚のユーザーにも情報を的確に伝えられるデザインが実現できるのはないかと考えます。
ラベルやラベルとアイコンを組み合わせて用いる方が的確に情報を伝えられると思います。
文字をなるべく少なくしたい、スタイリッシュな雰囲気にしたいなどの要件があるのであれば、色だけよりはアイコンのみが良いかもしれませんね！
まとめ
今回は、多様な色覚に配慮したUIを考えてみました。
本記事の例はあくまでも1例であり、Google Chrome上のエミュレート結果です。
Google Chrome上では、「赤色の識別不可」「緑色の識別不可」「青色の識別不可」のように分かりやすく表記されていますが、今回使用したパスワードの入力フォームの例を見て、一概に「何色が識別できない」とは言えない結果だったのではないでしょうか。
人それぞれ識別のしやすさが異なるのと、使用する色によっても変わってくるので、記事内では「多様な色覚」という表現を使用しました。
結論として一つにまとめることはできませんが、少しでも色覚について知ったり、機能を把握しておくことで、多くの人に愛される色覚に配慮したUIのWebサイトやアプリケーションになるのかもしれませんね！
