2019年5月19日から、board内で使われている色を調整し、色弱・色覚特性などと称される色覚「P型・D型」の方にも識別しやすい配色にしました。
こういった取り組みが、多くの製品・サービスで行われるようになれば良いなと思い、経緯や実際に行ったことなどを紹介したいと思います。
今回の取り組みは、NPO法人「カラーユニバーサルデザイン機構（CUDO）」に検証を依頼し、問題のある箇所は修正後、無事、同機構が発行するカラーユニバーサルデザイン（CUD）認証を取得することができました。
ちなみに、CUDOさんによると、請求書作成・販売管理・会計・SFAなどの業務支援システムとしてこの認証の取得は初めてらしいです。
カラーユニバーサルデザインとは
現在日本には、割合が最も多い一般色覚「C型」の他、色弱・色覚特性とも称される色覚「P型・D型」の方が男性の約20人に1人、女性の約500人に1人の割合で、計320万人以上*いるとされています。
カラーユニバーサルデザインとは、こうした多様な色覚に配慮し、より多くの人が対象を識別しやすいように配色されたデザインの呼称です。
今回の取り組みの経緯・背景
以前から「日本人男性の20人に1人」という割合は知っていました。
boardは、見積書や請求書の作成などの販売管理分野を扱うサービスですが、5%の割合であれば、当然、ユーザの中にP型・D型の方もいるはずなので、ここ数年、どこかのタイミングで対応したいと考えていました。
ちなみに、単純に比較するものではないですが、2019年5月時点のboardユーザのブラウザ別の割合を確認すると、
Firefox：4.53%
Edge：4.21%
なので、「20人に1人」という割合は、決して無視できる数字ではないなと。
ただ、対応するにしても、「実際にどう見えているか」というのはわかりません。協力してくれる方がいないと対応が難しいため、頭の片隅にはありつつ、数年経ってしまっていました。
そんな中、昨年、board内の色合いを少し変えた際に、β版の頃から使って頂いているシャムロック・レコードの青木さんからフィードバックを頂き、その話の流れで、カラーユニバーサルデザインの話になりました。
シャムロック・レコードさんは、UDトークという音声認識と自動翻訳技術を使って会話・スピーチをリアルタイムに文字化・翻訳するアプリを開発していて、UDトークは外国人対応や聴覚障害者対応などで使われています。
そういった背景もあり、システムにおけるバリアフリーについてよくご存じで、NPO法人「カラーユニバーサルデザイン機構」をご紹介頂き、今回の取り組みがスタートしました。
元々この対応は、開発ロードマップにもなく突然出てきた話で、とくに今年は、改元・税率変更・軽減税率対応と、期限が決まっているイベントが目白押しで、他のことをやっている余裕はなかったのですが、こういうのはタイミングが大事だと思うので、やることにしました。
board上で色の識別に意味がある箇所
boardには、案件一覧の受注ステータス、ダッシュボードでのアラートや売上分析のグラフなど、色で意味を識別できる箇所があります。
たとえば案件一覧の場合、下図のように色分けされていますが、これは「受注ステータス」ごとに色分けされています。
上記のように、主要なステータスは色で簡単に判別できるようになっていて、もちろん識別できなくても使えるのですが、識別できた方がよりわかりやすくなります。
また、グラフは、色の識別ができないと区別がつかないので、これは必須ですね。
余談ですが、担当の方と話していた中で「グラフはできれば模様が異なる方が良い」という話があって思い出したことが1つあります。
僕はアメリカの大学に行ってたのですが、授業の中で「グラフは色だけでなく、模様で判別が付くようにしないといけない」って言われてたのを思い出しました・・・。
欧米だと10人に1人の割合らしいので、もっと一般的だったんですね。当時は全然理解していませんでした。
検証と対応の進め方
検証は、P型・D型に加え、一般色覚のC型を含めた3名の検証員が行います。
全画面に対して、各色覚を持った3名の検証員全員が色の違いを識別できるかという確認をしていきます。
パンフレットなどと違い、システムの場合は動的に表示が変わる点が難しく、「スクリーンショットでの検証」と「実際の画面を操作しての検証」の2ステップで進めました。
スクリーンショットで検証
まずは全画面のスクリーンショットを撮り、スクリーンショットベースで確認してもらいます。
この際、同一画面で複数の表示が切り替わるケースなどもあるため、スクリーンショットは126ファイルになりました。
スクリーンショットベースで検証された結果の指摘事項は、たとえば以下のようなものでした。
当然、こういう視点でフィードバックを頂くのは初めてで、これらのフィードバックを受けて、以下のようなことがわかりました。
- 色数はできるだけ少ない方が良く、色に意味がない場合は統廃合していく方が良さそう。
- 赤はオレンジが入っていると識別できるようになる。
- 隣接する色によって見えたり見えなかったりするため、データの状態に応じて色が変わる箇所が難しい。
- 既存ユーザに配慮して「現在の色の系統を維持する」必要があり、それが難しい。
検証の結果、NGだったものについては変更案を頂いて、それを反映してみるところから始めるのですが、これがなかなか苦労しました。
とくに「現在の色の系統を維持する」のは大きな制約になり、またデザインの方針として選べないものもあります。そのため、提案してもらった色をそのまま使えないケースもあり、その場合は、その色を元に調整した案を数パターン作成し、再度そのスクリーンショットを確認してもらうという流れで色を決めていきました。
また、この際、闇雲に色を調整しても難しいため、「色のシミュレータ」アプリを使って、P型・D型での見え方を確認しながら調整しました。
なお「色のシミュレータ」アプリで問題なくても検証でNGとなることが何度かあったので、とくに見えるか見えないかギリギリのラインの場合は多少見え方に差はありそうです。
色を変更したスクリーンショットを再度検証してもらい、識別できたものとその優先順位（見やすい順）を教えてもらい、その中から、boardの方針として採用可能な一番優先順位が高いものを選択していきます。
たとえば、一覧画面のステータスに応じた色の場合、以下のようなパターンを作りました。
この結果、すべて合格ではあったのですが、見やすさの順番として、3→2→4→1→5とのことでした。
候補3や候補2は、一般色覚のC型にとっても見やすくとても良いのですが、ステータスに応じて色分けしていたものなので、色で覚えている方も多いはずで、「緑」だったものが「青」になってしまうのは避けたいと考えていました。
そのため、「緑」の系統を維持できる候補4を採用しました。
実際の画面で検証
動的に動く部分、マウスオーバーで表示される部分などもあるため、スクリーンショットベースでの検証がOKになった後、実際に画面を自由に操作しながら検証してもらいました。
実際の画面を操作して検証した結果、指摘があったのは、たとえば以下のようなものでした。
＜一覧上のアイコン＞
一覧の背景色とその上に表示されるアイコンの組み合わせによってNGになるものがありました。
＜注意を促す赤文字＞
下図のような注意を促す赤文字が黒に見えている状態でした。
＜折れ線グラフのプロットの大きさ＞
折れ線グラフのプロットが小さくて見にくい状態でした。
ちなみに、この際に説明してもらったのですが、大きさによっても識別可否が変わってくるようです。
＜ヘルプでのステータス別の色の説明＞
ヘルプで、下図のように「言葉」で色を表現しているものに対してもNGの指摘がありました。
このヘルプの記述に関する指摘は目から鱗でした。全く考えたこともなかったのですが、言われてみればその通りですよね。
そのため、以下のように変更しました。
変更箇所の例
実際に変更した具体例をいくつか紹介したいと思います。
一般色覚のC型にとっては微妙な違いで、見比べないとわからないものもあるのですが、逆に言えば、既存の色の系統を維持しながら対応できるということでもあります。
＜一覧画面のステータスに連動した背景色＞
| 旧 | 新 |
|---|---|
| #e2eddd | #e4f3e9 |
| #faf6e2 | #fdf8e1 |
| #efe1e1 | #efdbe0 |
＜ダッシュボード＞
| 旧 | 新 |
|---|---|
| #da7373 | #e27e55 |
＜グラフ＞
| 旧 | 新 |
|---|---|
| #87b87f | #96c392 |
| #6fb3e0 | #83b8db |
| #fee074 | #f2de74 |
| #d15b47 | #d97652 |
| #af4e96 | #7d3a77 |
対応してみた感想
今回の対応をするにあたって、「既存の色を軸に近い色で調整することは可能」とは聞いていたのですが、それでも「既存の色が大幅に変わってしまうのではないか」「デザイン的なバランスが大きく崩れるのではないか」という懸念は少なからずありました。
ただ、変更前後の画像を見比べて見ると、一般色覚のC型にとっては大きく違わないものも多く、ほとんどの場合、既存の色の系統を維持しつつ、対応することができました。
そして、そのちょっとした違いで、P型・D型の方が識別できるようになります。
＊ちなみに、1箇所だけどうしても個人的にしっくりこない箇所はあるのですが、僕以外はみんな新しい色の方が見やすいと言うので、諦めました・・・。既存ユーザからネガティブな反応があるとしたら、ここではないかなあと思っています。
また、この対応をする前は「P型・D型の方でも見える色を使う」のだと思っていたのですが、「他の色との違いを識別できる色を使う」ということなんですね。
たとえば、P型は赤が黒に見えるようなのですが、これをオレンジ寄りの赤にすることで、黒との違いを識別できるようになるようです。このような形で調整をするため、既存の色の系統をなるべく維持するということができます。
一度こういう取り組みをすると、とくに色にこだわりや決まりがなければ、考慮した色を使おうという意識になります。
たとえば、このブログ記事に出てくるスクリーンショットに入れている赤枠・赤文字は、黒に見えないよう、赤に少しオレンジが入っている色を使っています。
今回の対応に伴い、boardのヘルプのスクリーンショットを差し替えて行く必要がありますが、その際に、すべてこの色を使っていくつもりです。
ただ、正直なところ、落としどころの色を決めるのはかなり大変でした。
CUDOさん側も想定していたよりかなり大変だったようで、申し訳ない気持ちなのですが、具体的には以下のような点が大変でした。
まず、既存ユーザに配慮し「色の系統を維持する」のはやはり大変で、最初から対応する場合は、もっと色の選択肢も広がるし、より良い色の選択ができたなと思います。
それから、データの状態によって色が変わる箇所があり、それにより色の組み合わせが変わり、隣接する色によって、見える見えないが変わってきてしまいます。これは、システムがカラーユニバーサルデザイン対応する場合の難しいところだなと思いました。
また、boardはもともと色数が多めで、それも大変な要因のひとつでした。
ということで、カラーユニバーサルデザイン対応をする場合は、最初からやるのがオススメですが、なかなかサービス開始当初からそこにリソースを割くのは難しい気もするので、なるべく使う色の数は少なめに抑えておくと、やりやすいかもしれないです。
正直なところ、今回の対応で、どれだけの方がどのくらい使いやすくなるのかはわからず、見え方の違いなので僕自身は確認しようがないのですが、これによって少しでも使いやすくなる方がいれば良いなと思います。
また、一般色覚のC型の方にとっては、大きな変更はなく、最初は気になるかもしれませんが、すぐに慣れるレベルで調整できたのではないかなと思っています。
＊実際の反応はこれからなので、まだなんとも言えませんが・・・。
ちなみに余談ですが、一般色覚のC型でも、人によって色の見え方は違うとされていて、それを体感する出来事がありました。
今回の対応は、実際に対応していたのは僕ではなく別のエンジニアだったのですが、2人の間で、変更後の印象が全く違ったのが面白かったです。
僕が「グラフの色合いが変わったのは全然気にならないけど、案件一覧の色が明るくなって、緑が青寄りになったのがとても気になる」って言ったら、「え！？グラフだいぶ違いますよね？むしろ案件一覧はあまり・・・」って素でびっくりされて、お互いに「え！？」みたいな状況になってました。
今回の中でわかったこととしては、僕はややくすんだ色が好きらしく、普段からそういうチョイスをしていて、その系統の色はしっくりくるのであまり気にならないっぽいです。
デザインは素人なので、実際のところはどうかはわからないですが・・・。
