Moi! ヌーラボに入社してから3年目のUXエンジニアのヨーナスです。久しぶりのブログ投稿ですごく緊張しています。
今回は、アクセシビリティに特化することを決める前に色覚特性について知りたかったことを書こうと思います。このブログは、ヌーラバー真夏のブログリレー2024の8日目のブログとして更新しています。
目次
まずは言っておきたいのは、私は色覚特性（色弱、色覚異常と呼ばれることもありますが、このブログでは色覚特性と表記します）を持っていないため、この投稿に書いてあることは間接的に得た情報に基づいています。色のアクセシビリティの判断は、できるだけ当事者に相談しましょう。
最初は、色覚特性について解説しようと思います。そのあと、ありがちな誤解をいくつか紹介します。最後に、基本的な対応方法を紹介します。
目に見えない障害としての色覚特性
さまざまな障害について考えるときによく頭に浮かぶのは、車椅子や白杖というような、分かりやすくて、ポスターや案内標識によく載っているイメージです。それに対して、色覚特性は目に見えない障害の一種で、配慮の必要性は比較的気づきにくいです。たとえば移動困難と違って、色覚特性を持っていることは外見だけでは分かりません。それに、当事者にとって、特別な理由がない限り、自分から明かす必要も特にないので、例え同じ職場でも、色覚特性を持っていることに周囲の人に気づかれない場合が多いです。色覚特性には程度もあるので、軽度の場合は自分でさえ気づいていない人もいます。
公益社団法人日本眼科医会によると、日本人では、男性の20人に1人、 女性の500人に1人色覚特性を持っている人がいます。個人的な体験談ですが、アクセシビリティ関連の仕事をしていることを友人に伝えると、自分が色覚異常だと言ってきた人が何人かいます。このような経験をしたことで、色覚の多様性を考慮したデザインの必要性を改めて実感しました。
色の見え方について
アクセシビリティについて解説する前に、色覚特性についてもっと早く知りたかったことをざっくりまとめます。色の見え方に影響を与える要素は、ここに書いてあること以外にも多くあるのですが、簡潔さのために必要最低限で説明したいと思います。論文などでは絶対に引用しないでください。
目の網膜には、さまざまな光の成分に反応する錐体細胞（錐体）が3種類あって、色を正しく見るためには、そのすべてが正常に働く必要があります。色覚特性は、その中の一つまたは複数の種類の錐体に異常があるときに生じます。これによって、感知できる色の範囲が狭くなって、色の違いが判別しにくくなります。
一つの錐体の異常で感知しにくくなった色は、ほかの錐体の反応である程度補われる場合もありますので、（複数の錐体が働かない場合などを除いて）黒く見えたりすることは基本的にはありません。重要なのは、錐体の欠損によって、色の全体的な見え方が変わることです。
色覚特性についてありがちな誤解
それでは、アクセシビリティ課題を起こしたり、適切な対応を阻んだりする、色覚特性についてありがちな誤解をいくつか紹介し、実際はどうなっているかを解説してみたいと思います。
誤解１：赤と緑を避ければ十分
テレビや本などでは、色覚特性のイメージとして、赤と緑の区別が付かないことがよく挙げられて、問題はその2つの色に限ると思われることがあります。しかし、さきほど説明した通り、錐体細胞のどれかが正常に働かない場合は、見え方の変化は特定の色だけに限りません。例えば、赤い光を感知できないと、赤い成分が入ったすべての色の見え方が変わります。
そのため、デザインするときに赤色と緑色を使った配色を避けたとしても、他にも混同しやすい色の組み合わせは多くあります。 色覚特性にはさまざまなパターンがあり、混同しやすい色の組み合わせも異なります。下の図で、赤い光に感度が高い錐体細胞が反応しない「1型2色覚」というパターンのシミュレーションを見てみましょう。
上の図では、
・ライトグレーと赤でできるライトピンク（①と②）
・青と赤でできる紫色（③）
・緑と赤でできるオレンジ色（④）
を例として紹介しています。ここでシミュレートしたのはたった1つの色覚特性のパターンですが、パターンによって混同しやすい色も異なります。
誤解２：区別しにくい配色を避ければ十分
スマホアプリ、ウェブサービスなどの中で、アイテムの種類、進捗状態などは、色で表現されることが多いです。
上の図には、赤、オレンジ、薄い緑と濃い緑が、上から順番に並んでいます。シミュレーターで見ると、要素は色である程度識別できると言えるでしょう。
ただ、これではまた新たな問題が現れます。比較対象となる色があるときに色を識別できても、単体で見るとどの色かを特定するのは困難になるということです。上の図の色を一つ抜き出してみましょう。
何色でしょうか？上の図を見なくても分かりますか？ 上記のカラーパレットを4つの色で作成しましたが、色が増えるに連れて、単体で見るときの区別しやすさを保つことが難しくなります。
誤解３：いろいろ配慮するとデザインが楽しくなくなってしまう
色のアクセシビリティ対応をマイナスとして捉えられることもあります。理由としてよく挙げられるのは、デザインの自由が制限されるということです。正直に言うと、色覚特性対応でデザインが制限されるという意見を完全には否定できません。どうせ、色の選び方によって前に紹介したような問題が起きますから。しかし、アクセシビリティ対応でデザインが必ず楽しくなくなるのでしょうか？
デザインから一歩下がって全体像を見ましょう。例えばBacklogのようなプロジェクト管理ツールは、ツール自体を楽しむものではなく、利用者の業務を支えるためのものです。そのため、楽しいデザインよりも、機能的で使いやすい体験を提供するべきではないでしょうか。どちらかを選ばないといけないと言いたいわけではありません。もちろん、ユーザビリティを確保しながら楽しいデザインを実装できればベストだと思っています。
以前、ウェブサイトをデザインする際に、いっそ色をなくしてみてはという意見が出たことがありました。しかし、ここで意識してほしいのは、色覚特性によって色の見え方が変わっても、色が見えないわけではありません。日常生活のなかで色彩を楽しめないわけでもないのです。過剰な配慮をしてしまうと誰も喜ばないデザインになってしまうリスクがあります。
じゃ、どうすればいい？
今までの話はかなりネガティブに聞こえたかもしれませんが、これから基本的な対応の仕方について紹介したいと思います！
アクセシビリティガイドラインをチェック！
まずは、世界基準になっているWeb Accessibility Initiativeが公開しているアクセシビリティガイドラインWCAGを見てみましょう。ここで着目したいのは、WCAG 2.2の「達成基準 1.4.1 色の使用」です。内容は以下の通りです。
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。
そのほかに、補足ページ「達成基準 1.4.1: 色の使用を理解する」にはこのように書かれています。
この達成基準は、ページ上での色の使用、又は他の視覚的な表示によって補完される場合に色分けすることを何ら阻むものではない。
アクセシビリティガイドラインは、厳しいイメージがありますが、色を使ってはいけないということは一切書かれていません！重要なのは、色の使い方で利用を阻害しないことです。つまり、UI要素に色を付けても問題ないが、色覚特性を持っていても、その要素の意味や使い方が通じるために、色以外の何らかの「視覚的手段」を提供しなければなりません。これに当てはまる「視覚的手段」の中に、「赤いエラーメッセージの横に表示される「！」アイコン」、「色が付いているのリンクに付く下線」、「課題の状態を色で示すバッジの中の文字」などがあります。
「達成基準 1.4.1: 色の使用」に関しては、この程度の対応でだいたいクリアできます。
情報を伝える要素をうまく取り入れれば、色覚特性があるかないか関係なく、UIを分かりやすくできます。正常色覚でも、状況によって色が区別しにくくなるときもあります。例えば古い液晶パネルのディスプレイを使うときや、強い光の下の光沢ディスプレイを使うときにも、色以外の視覚的な手がかりが役立ちます。
シミュレーターを使ってみましょう
アクセシビリティガイドラインに沿ってUIにさまざまな手がかりを足しても、色覚特性だと分かりにくい配色が残っていたら、良い利用体験とは言えないでしょう。
このような、ガイドラインを満たすのに不便な箇所を発見するために、色覚特性シミュレーターが利用できます。ブラウザーの中でウェブサイトを検証するには、Chromeの開発者ツールにある「色覚異常をエミュレート」設定が便利です。
開発者ツールを開いたままEscボタンを押して表示される「レンダリング」タブの中で、「色覚異常をエミュレート」メニューを選択すると、さまざまなフィルターを選べます。
ここで、「1型2色覚」「1型2色覚」「3型2色覚」の設定をすると、色覚特性を持つユーザーがサイトを見るとき、区別できなくなる要素がないかどうかの簡易チェックができます。ただし、これらはあくまでもシミュレーションなので、絶対にそう見える保証ではありません。可能な限り、色覚特性を持つ人に確認を依頼したほうが望ましいです。
それでもデフォルトでChromeに搭載されているし、リアルタイムでのインタラクションの目視確認もできるし、こんなに気づきにくい場所に置かれているのを残念に思っています。
色を調整してみましょう！
シミュレーターを使って判別しにくい色の組み合わせを発見したら、解消していきます。下のパレットを見てみましょう。
淡い緑色と淡い茶色の要素が並んでいますが、シミュレーションで見ると少なくとも1型2色覚の場合はその色の区別が付きにくいことが分かります。こういうふうな、2つの色が同じに見えてしまう場合は、どちらかの色を調整するのが解消方法の1つです。
上の緑色の彩度（s）と明度（l）を5%ずつ下げてみました。元々の色は対して変わっていないのに、シミュレーションを見ると、色の判別がだいぶつきやすくなりました。
使用する色と色覚特性のパターンによって、調整の種類や程度が異なりますので、直感で決めるより、適用する前にシミュレーションで確認するようにしましょう。こういうふうな修正を便利にするには、色の指定によく使われるhexよりhslなど、色相と彩度と明度を個別で指定できる方法がおすすめです。
分かりにくい色が意外と小さな調整で見やすくなるかもしれないので、ぜひ試してみてほしいです。
新しくカラーパレットを作る際の配慮
シミュレーションを見ながら作成する
すでに作成した色の検証ではなく、新しくカラーパレットを作成する場合は、David Nichols氏が開発されたカラーパレットごとのシミュレーターを使用できるColoring for Colorblindnessがおすすめです。情報を伝えることに重点を置いたカラーパレットを作成する際、色覚特性があるユーザーでも区別が十分に付くかどうかすぐに確認できます。カラーパレットを作りながらプレビューができるので、最初から問題を避けるという大きなメリットがあります。
Coloring for Colorblindnessより
色覚特性に対応したカラーパレットを使う
長年の研究に基づいて、多様な色覚特性を考慮して作成されたカラーパレットはいくつか公開されていますので、自分でカラーパレットを作成する必要はありません。カラーユニバーサルデザイン推奨配色セット制作委員会が制作した、カラーユニバーサルデザイン推奨配色セットガイドブックでいくつか紹介されるので、ぜひ参考にしてください。
参考資料
David Nichols氏の Coloring for Colorblindness（英語）
Paul Tol氏の Paul Tol’s Notes（英語）
Martin Krzywinski氏の Designing for Color Blindness（英語）
伊藤啓氏の 「カラーユニバーサルデザイン 色覚バリアフリーを目指して」
色彩検定協会 – 色彩検定 公式テキスト UC 級（2022年改訂版）
結論
詳しく書けていませんが、少しでも役に立てたら非常に嬉しいです。
ユーザー層が多岐にわたるSaaSの開発においては、重要なのは、サービスを使えるかどうかということです。アクセシビリティ対応を行うことでUIのデザインはある程度制限されるとしても、それを挑戦だと思えばいいです。アクセシビリティガイドラインも、同じように「デザインの自由を制限するもの」ではなく、「使いやすいデザインへ導くためのガイド」だと考えれば楽になります。
アクセシビリティ対応をした結果、想定していた対象層より広い層にメリットが生じることをカーブカット効果（Curb-cut effect）と言います。色だけに頼らないデザインはこういうふうに、UIの曖昧さの軽減にも繋がりますし、すべてのユーザーにとっても使いやすいではないかと思います。
Backlogをよりアクセシブルに体験を提供できるために今後も頑張っていきます！
