カラーアクセシビリティ - Webやアプリデザインで注意すべき例
NTTレゾナントテクノロジーUI/UXデザイナーの笛田です。WebサイトやモバイルアプリのUIデザインを担当しています。
今回はカラーアクセシビリティについて、デザイン時に注意すべき点を例と共にいくつかご紹介します。
前提知識
アクセシビリティとは
JIS X 8341-1のアクセシビリティは、以下のように定義されています（※1）。
様々な能力をもつ最も幅広い層の人々に対する製品，サービス，環境又は施設（のインタラクティブシステム）のユーザビリティ
色のコントラスト
幅広い層の人々に公平に情報を見やすくするためには、色のコントラスト比が重要です。文字の色と背景色とのコントラスト比が高いほど文字が認識しやすいとされており、WCAG 2.1（※2）では、以下のように達成基準が設けられています。
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。
具体的には日本語の全角文字の場合、以下の通りです。
22ポイント未満の通常文字は4.5:1以上
22ポイント以上の巨大文字、18ポイントの太字の場合は3:1以上
これ以降、出てくるコントラスト比についてはこのWCAG 2.1の達成基準を前提としています。
また、コントラスト比のチェックは無償のWebツールがあり、今回はSyncerの色のコントラストチェッカー（※3）をお借りしました。
色覚多様性について
今回、アクセシビリティの中から「カラー」に限定して書くことにしたのは、「特定の色の組み合わせが判別しにくい人（以下、色覚多様性者といいます）」が、日本では男性の20人に1人、女性の500人に1人、存在すると言われているためです。
多くのサービスではユーザー（ターゲット層）をある程度絞っていることがありますが、その中に色覚多様性者が存在することが十分に想像できます。どんなサービスを担当しているUI/UXデザイナーでも、全ての人が同じ色の見え方をしているわけではないということを考慮してデザインする必要があります。
この色の見え方のチェックはAdobeのツールや無償のアプリなどがあり、今回はアプリの色のシミュレーター（※4）をお借りしました。
注意例１：文字色と背景色のコントラスト
UIを作っていると、ボタンテキストや説明テキストなど、あらゆるところで文字が出てきます。これらをコントラスト比率を考慮してデザインしなければなりません。
一番高いコントラスト比は21:1で、背景色が白（#FFFFFF）/ 文字色が黒（#000000）です。※文字色と背景色は逆転しても同じ
しかしボタンデザインなどは、白黒以外で作ることが多いため、注意が必要です。
上画像の緑のボタンは、実在のサイトやアプリでも見かける配色なのですが、実はコントラスト比が達成できていません。押させるために目立たせたいはずのボタンであるのに、実はそのボタンテキストが読みづらい状態であると言えます。
この場合、文字サイズや太さを変えても達成基準に到達しないため、配色自体を検討し直すべきと言えます。
注意例２：色覚多様性者との見え方の違い
コントラストをクリアしても、カラーアクセシビリティの観点ではまだ注意すべきところがあります。「色覚多様性者にも公平に見やすいか」です。
上画像では、2つの色の違うボタンが並んでおり、それぞれのボタンのコントラスト比はクリアしています。しかし色の見え方は、一般色覚者と色覚多様性者とで以下のように異なります。
特にP型では、2つのボタンがかなり似た色になってしまっています。これではパッと見での違いがわかりづらくユーザビリティが悪いと言え、また幅広い層の人々に公平に見えていると言えません。
このような見え方の不公平さが出ないように、デザインを検討し直す必要があります。
注意例３：色だけに依存したデザインをしない
WCAG 2.1では、以下のような達成基準も設けられています。
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。
つまり「色だけに依存してデザインをしない」ということです。この達成基準を満たしていないとどうなるのでしょうか。以下の例をご覧ください。
3色を使ったサークルグラフですが、P型、D型ではPlan AとPlan Bの色の違いがほぼなく、非常に見分けづらくなっています。確かにこれは幅広い層の人々に公平に見えていると言えません。
また、3色なので配色の再検討でもなんとかなりそうではあるのですが、グラフは5色以上使うことも多く、色だけに依存したデザインでは見分けをつけるのに限界があると想像できます。
達成基準にそって、色以外のデザイン要素を加え修正検討すると以下のようになりました。
修正例１ 区切り線を追加、各データにパターンを適用
修正例２ 区切り線を追加、汎用例からデータラベルに変更
2つの修正例それぞれ程度は違いますが、修正前と比較すると、全色覚で見分けやすくなったと思います。
今回の例はサークルグラフひとつなので、修正例２のデータラベルが見やすいと思います。しかし、積み上げ棒グラフが月毎に1年分というような場合はどうでしょうか。データラベルの文字が多くなるため修正例１のようなパターン適用の方が向いているかもしれません。
このように、色だけに依存しないデザインというのは、幅広い層の人々が公平に見分けるために重要なことだと言えます。
最後に
カラーアクセシビリティについて、Webやアプリデザインで注意すべき例を紹介しました。
昨今は例えばハザードマップのような全ての人々が対象のサービスも増えており、カラーアクセシビリティの重要性は高まっていると感じます。
私自身も、幅広い層の人々に公平なデザインが提供できるようにしっかり押さえていきたいと思います。
参考サイト
※1 ウェブアクセシビリティ基盤委員会 https://waic.jp/docs/jis2010/understanding/201008/
※2 Web Content Accessibility Guidelines (WCAG) 2.1
https://waic.jp/translations/WCAG21/
※3 Syncer 色のコントラストチェッカー
https://lab.syncer.jp/Tool/Color-Contrast-Checker/
※4 アプリ 色のシミュレーター
https://asada.website/cvsimulator/j/