弊社で提供しているboardでは、2019年に、全画面を対象にNPO法人 カラーユニバーサルデザイン機構（以下、CUDO）の検証を受け、色覚の多様性を考慮した配色に変更しました。
当時の取り組みについては、下記に詳しく書いています。
上記の取り組み以降、CUDOさんの法人賛助会員というかたちで、毎年わずかながらではありますが、CUDOさんの活動を支援してきました。
そういった背景もあり、「カラーユニバーサルデザインの取り組みをどうやって始めたら良いか」と聞かれることがたびたびあるので、「始め方」を書いてみようと思います。
当記事での表記について
カラーユニバーサルデザイン（CUD）とカラーユニバーサルデザイン機構（CUDO）の略称が似ていることから、当記事では、カラーユニバーサルデザイン機構を「CUDO」と記載し、カラーユニバーサルデザインは略さずに記載します。
前提
自分自身は、カラーユニバーサルデザインやアクセシビリティーの専門ではありません。
エンジニアの立場で、boardという1つのサービスをカラーユニバーサルデザインに対応する過程で学んだこと・理解したことがベースになっているため、知識が偏っていたり、正しくない可能性がありますので、ご了承ください。
本格的に取り組みたい場合は、CUDOさんに相談するのが良いと思います。状況等に応じて、進め方なども相談に乗ってもらえます。
色覚の呼称について
色覚タイプの呼称については様々あり、「P型・D型」という呼称や、医学（眼科）用語である「1型2色覚・2型2色覚」などがあります。
当記事では、CUDOさんが提唱する「P型・D型」という呼称を使います。
- C型：一般色覚
- P型：赤の光を受け取る視細胞がない（強度と弱度があります）
- D型：緑の光を受け取る視細胞がない（強度と弱度があります）
- T型：青の光を受け取る視細胞がない
- A型：赤・緑・青の光を受け取る視細胞がない（明暗でしか色を感じることができない）
T型・A型は非常に少なく、CUDOさんでもP型・D型を中心に対応していることから、当記事では、P型（強度）・D型（強度）を対象に書いていきたいと思います。
また、P型・D型などの方を、CUDOさんが使用している呼称に合わせて「色弱者」と表記します。
参考：色覚の呼称 – NPO法人 カラーユニバーサルデザイン機構 CUDO
色の見え方の違い
色の見え方は、みんな同じではなく、目の錐体（すいたい）細胞の違いによって変わってきます。
簡単にいうと、「P型は赤と緑、濃い赤と黒が見分けにくい」「D型は広く赤と緑が見分けにくい」というイメージです。
たとえば、注意メッセージなどに赤を使うことが多いかと思いますが、P型の場合、赤と黒は区別がつきにくいため、注意を引くことができない可能性があります。
また、色覚タイプによって見え方にはっきりとした「区切り」があるわけではなく、見え方の差はグラデーションのようになっており、同一の色覚タイプでも見え方は異なります。そのため、人によって見分けられるかどうかの違いがあります。
人によって見え方が違うというのは一般色覚（C型）でも同様で、以下は、boardのカラーユニバーサルデザイン対応時のブログからの引用です。
ちなみに余談ですが、一般色覚のC型でも、人によって色の見え方は違うとされていて、それを体感する出来事がありました。
今回の対応は、実際に対応していたのは僕ではなく別のエンジニアだったのですが、2人の間で、変更後の印象が全く違ったのが面白かったです。
僕が「グラフの色合いが変わったのは全然気にならないけど、案件一覧の色が明るくなって、緑が青寄りになったのがとても気になる」って言ったら、「え！？グラフだいぶ違いますよね？むしろ案件一覧はあまり・・・」って素でびっくりされて、お互いに「え！？」みたいな状況になってました。
色弱者の割合
日本眼科医会の調査によると日本人男性の約5％は色弱者とのことです。
先日、CUDOさんにboardの事例インタビューをお願いしたのですが、その際、以下のようなお話がありました。
これは、「名字が佐藤・鈴木・高橋の人」の合計の割合（4.11% 2018年7月1日概算値。総務省統計局2018年7月20日公表資料より ）よりも多い
こう考えると、結構多いですよね。
この割合であれば、普段一緒に仕事をしている身の回りの人でもいる可能性は高いと考えられます。
何から取り組むべきか
前述の色覚タイプの説明で、「P型は赤と緑、濃い赤と黒が見分けにくい」「D型は広く赤と緑が見分けにくい」とありました。
とくに赤の場合、注意メッセージなど確実に目立ってほしいもので使いますが、P型にとっては、赤と黒は見分けにくいため、気づきにくくなります。
CUDOさんにお話を伺った際も、サイトやシステムを利用する上で困ることとして「エラーメッセージに気づかなかった」というお話がありました。
この対策として、赤にオレンジを入れた赤橙を使います。たとえば、boardでは、注意を促す赤文字には#ec5220という色を使っています。
「本格的にカラーユニバーサルデザインで取り組む！」というよりは、まずは、日常的に、重要な色だけでも考慮した色を選択することで、より多くの人にとって見やすさがぐっと変わってくるはずです。
そういうちょっとした取り組みからスタートしていけると良いのではないかと思います。
また、会社として取り組む場合は、CUDOさんに相談するのがベストだと思いますが、まずは、パンフレット・コーポレートサイト・パワポ資料のテンプレートなどから始めると効果的ではないかと思います。
シミュレーションアプリを使って改善箇所を探す
iOS・Androidアプリで「色のシミュレータ」というアプリがあり、これで擬似的に、P型・D型・T型での見え方をシミュレーションできます。これを使って、識別しにくい箇所を探します。
たとえば、boardの赤文字の例だと、下図のようになります。下図は「色のシミュレータ」アプリでシミュレーションした際のスクリーンショットです。
上から順番に、C型・P型・D型での見え方が表示されています。
一番上のC型が一般色覚ですのでそのままの色合いです。赤橙の文字色で注意メッセージを表示しています。
P型・D型のシミュレーションでは、黒と異なる色であることがわかります。
「色のシミュレータ」アプリはスマホアプリですので、画面・紙・モノなど、何に対してもアプリを起動してカメラを向ければさっと確認できます。そのため、作成した資料・パンフレット・サイト・システムなど、普段自分が作成している様々なものに対して、これを使って確認しながら進めていくことができます。
ちなみに、このアプリを使ってP型・D型として表示される色合いは、実際に見えている色ではなく、見えにくさを伝えるための「疑似的な色」だそうです。そのため、実際に見えている色として調整するのではなく、「見分けがつく色合いに調整する」という使い方をします。
ただ、1点注意点があって、シミュレータアプリで「区別が付く」と判断したものが、CUDOさんの検証ではNGとなったケースはかなりありました。
これは、シミュレータアプリの精度というよりは、「そもそも見え方は個人によって差異がある」「区別できるという判断が適切ではない」などの理由が大きそうです。
制作者側からすると「この色合で区別がついてほしい」という気持ちで色を探しています。そのため、ちょっと判定基準が緩めになりがちです。
一方、CUDOさんの検証では、最低限見分けられるレベルではなく「わかりやすく区別がつく」という判断基準を持っていますので、微妙な差の場合はNGと判断されるのではないかと推測しています。
そのため、「シミュレータアプリで見ると区別できるので問題ない」とは言い切れないのですが、日常的にさっと確認する手段としてはとても手軽で良いと思うので、普段はこれを使いつつ、微妙な差はNGと判断して調整するようにしていくのが良いかと思います。
カラーユニバーサルデザインの観点で安全な色を知りたい
既に資料やサイトがあり、そこで使用している色が多いと、調整が大変だったりします。
一方、新規で作成する場合は、最初からカラーユニバーサルデザインを考慮した配色セットを使うという方法で進めると、やりやすいかと思います。
たとえば、以下のようなものがあります。
JIS安全色は色数が少ないのですが、CUDOさんの配色セットでは多くの色が用意されており、様々なシーンで活用できそうです。
CUDOさんの配色セットは、上記ページより申し込みして配送してもらうか、PDFのダウンロード版があります。
各個人ですぐに取り組めるものとして、たとえば、新たに資料を作成する際など、上記の配色セットの色を使うと、手軽にカラーユニバーサルデザインの取り組みをスタートできるのではないかと思います。
とくに重要な「赤」をカラーユニバーサルデザイン対応の赤橙にするだけでも大きな違いです。
なお、同じ色でも、隣接色によって見える・見えないが変わってきたり、文字の太さ・大きさで変わってきたりもします。この辺はなかなか難しいところなのですが、なるべく細い文字・小さい文字を避けるようにしていくのが良いのではないかと思います。
取り組みをしてわかったこと
カラーユニバーサルデザインの取り組みをする前は、「強い色を使う」「使える色がかなり限定されてしまう」というイメージを持っていました。
ただ、実際にはそうではなく「同系色で区別が付く色を探す」ということをやりますので、元の色の系統を維持しながら、カラーユニバーサルデザイン対応を進めていくことができます。
これは、2019年にCUDOさんに検証を依頼した際もその旨の説明がありました。
boardでの取り組み時のブログでいくつか前後比較のスクリーンショットを載せていますが、それを見ていただくとわかるように、基本的に同系色を維持しています。
すでにあるものを途中から変更する場合で、かつ「可能な限り今までの色合いは維持したい」という場合は、やはり両立する色を探すのは苦労します。
ただ、最初からカラーユニバーサルデザインを考慮した配色をするのであれば、ずっとやりやすいはずです。
ぜひ、JIS安全色やCUDOさんの配色セットを参考に、カラーユニバーサルデザインへの取り組みを始めてみてください。
参考になる情報・書籍など
CUDOさんのサイトでは、カラーユニバーサルデザインや色覚の仕組みなどの説明があります。CUD検定などもやっており、基本的な仕組みや知識を学べます。
また、カラーユニバーサルデザインに限ったものではないですが、『見えにくい、読みにくい「困った！」を解決するデザイン』がとても良かったです。
