アクセシビリティを向上させる色の知識

こんにちは。最近「アクセシビリティ」という言葉をよく耳にするようになりましたね。
特に、Webデザインやサービス開発の現場では、その重要性がますます高まっています。

関心が高まった理由の1つとして挙げられるのが、2024年4月に「障害者差別解消法」の改正内容が適用されたことです。
以前と何がが変わったのかというと、今まで行政機関のみ義務とされてましたが改正により民間事業者にも「合理的配慮の提供」が義務づけられました。
具体的な内容については先の話で触れますが、こういった変化もあってデザイナーがアクセシビリティに配慮した提案をする機会も増えてるのではないでしょうか？

ちょっと前から私は業務の片手間で色彩の勉強を少しずつしています。勉強していく中でアクセシビリティ対応と色彩の知識は通じるものが多そうだと感じたので、アクセシビリティを高めるために知って欲しい色の知識についてこの記事ではまとめています。
一般的なアクセシビリティ対応を網羅した内容ではなく「色」と「アクセシビリティ」ついてフォーカスしているので 色彩検定(UC級)の内容を知らないよという方はぜひ読んで欲しい内容になっています。
また、実際の業務で活用して便利だったツールなど合わせて紹介しています。

話が少し戻りますが冒頭にも書いた「合理的配慮の提供」が義務になる、つまりこれがどういうことかというと
障害のある人が社会の中で思うバリアを取り除くため、負担が重すぎない範囲で対応していこうね。ということです。
アクセシビリティの対応自体は努力義務の「環境の整備」という法律に位置づけられているので、今対応していないと罰則になるという訳ではありません。
今後努力義務から義務に変わる可能性もないとは言えないので、今からでも徐々にアクセシビリティ対応を進めていくのが良さそうですね。

アクセシビリティ対応の中でも色に関係する項目が下記の内容です。

Web Content Accessibility Guidelines (WCAG) 2.0 で定義されていること

色を使って伝えている情報に対して、すべての利用者が問題なく伝わるようにすること。

例えば、必須項目であるという情報を伝える為に「赤色」を使用する。こういったものが該当します。
テキスト情報でも必須項目であるということが伝われば問題ありませんが、色だけが唯一の伝達手段になっている場合は「色とは別の視覚的手段で補助」しなければいけません。
「テキスト」「装飾」「アイコン」で伝達の補助をするなど方法は色々あります。

ロービジョンの人がテキストを読めるように、テキストとその背景との間に十分なコントラストを提供すること。

ロービジョンとは下記のことを指します。

視力が低下されてるご高齢の方や色覚異常を持つ方が上記に該当されます。
加齢に伴いコントラストの感度が低下されていたり、色覚異常を持つ方は人によって異なる色相を知覚されるため通常の利用者とはコントラストも異なる知覚になります。

既存のサイトでコントラストを確認するなら、一先ずモノクロにしてみるのが早いです。
モノクロにすることでコントラストの調整はすることができますが、合理的配慮をするにはまだ足りていません。

色覚異常を持つ方には見えやすい色が人によって異なります。
赤い光を受け取るL錐体がない方、赤色を感じられないため緑色が黄色に見えます。
緑の光を受け取るM錐体がない方、緑色と赤色が黄みがかり、緑色と赤色の区別が難しくなります。
青い光を受け取るS錐体がない方、青色を感じられないため黄色がオレンジ寄りになり、黄色と青色の区別が難しくなります。

色覚多様性の見え方は主に下記で分類されてます。

全ての見え方に配慮してデザインするとなると配色に制限があり難しいので、1.4.1 色の使用で定義されてるように色の情報だけに頼らずデザインすることが重要になります。
それぞれの特徴に合わせて色彩配慮するには次のツールを使ってデザインするのが便利です。

chromeのDevToolsでシミュレーションができます。

F12を押すとDevToolsが開きます。
（画面を右クリックしてから検証をクリックしてもDevToolsを開けます）

右上のメニューを開いて「その他のツール」＞「レンダリング」を選びます。

「色覚異常をエミュレート」の箇所で任意の見え方にシミュレーションができます。

「Stark」のプラグインをXDに追加することで、簡単に作業中のデザインのコントラスト比や色覚異常を持つ方の見え方を確認できます。
クリエイティブクラウドで「Stark」を検索してプラグインを追加します。

Starkの機能

XDでプラグインをクリックすると「Contrast」「Typography」「Touch Targets」「Vision Simulator」が出てきます。

Contrast

確認したいデザインの背景と文字を両方選択した状態で、Contrastをクリックするとコントラスト比が表示されます。

Vision Simulator

確認したいデザインのアートボードを選択した状態で、Vision Simulatorをクリックすると色覚異常を持つ方の見え方を確認できます。

アートボードの名前にシミュレーション名がつきます。

色彩に関わる範囲だけでもアクセシビリティで配慮するべき点は多くあります。
アクセシビリティ対応の最初の一歩としてまず今回紹介した対応を考えてみるのはいかがでしょうか？
色彩検定のUC級でロービジョンや色覚特性について詳しく勉強できるのでぜひ今回気になった方はそちらも調べてみるのもおすすめです。