webアクセシビリティ、デザイン面での最初の難題「緑オレンジ問題」を考える
「このボタンは目立たせたいから、オレンジにしよう！」
そう思ってデザインすると、「このオレンジはアクセシビリティ未達です」と指摘が入る。
目立つ色を使ったのに、アクセシビリティに達していない。そんなちょっと腑に落ちない経験をしたことないでしょうか。
ここではデザイナーさんがひっかかりやすいwebアクセシビリティ問題No.1（個人調べ）といえる緑オレンジ問題を詳しくみていき、解決方法を考えます。
「緑オレンジ問題」とは
冒頭のように、ボタンを目立たせようとしてオレンジ色を選んだ瞬間、アクセシビリティ上で問題が発生する可能性があります。
↓ 以下のボタンをご覧ください。
良い感じのオレンジだと感じる人が多いかと思います。
しかし、このオレンジはアクセシビリティ基準をクリアしていません。
（ここでいう「アクセシビリティ基準」とはWCAG2.2レベルAAを元にします。初心者の方は「なんかみんなが基準にしているガイドラインがあるんだな」と思っておいてください）
アクセシビリティ基準を満たす、「ぎりぎりオレンジ」と言える色は↓ 下記になります。
もはや、茶色…
この問題は緑色でも発生します。
↓ 以下のボタンをごらんください。
さわやかなグリーンで良い感じ。
ところがこちらもアクセシビリティ基準未達です。
基準をクリアするためには↓ 以下まで濃くしなければいけません。
爽やかなブランディングでいきたいのに、これじゃ濃すぎ…
次は青色です。↓ 以下の青は、アクセシビリティ基準を余裕でクリアしてます。
もっと明るくできます。どこまで明るくできるのでしょうか。
この明るさでもコントラスト比をクリアできています。
オレンジや緑は濁らせないといけないのに、なぜ青はここまで鮮やかにできるのでしょうか？
その謎を解くカギは色相環にあります。色相環とは、色の種類をサークル状に並べたものです。
このサークルの一番上の黄色と一番下の紫色、ずいぶん見え方が違うのではないでしょうか
ちょっと想像してみてください。白い紙に黄色で書かれた文字は、読みづらいですよね。
つまり、色相環のてっぺんにある黄色に近い色ほど、モノが見えづらくなる傾向があります。
色相環を見ると、黄色のすぐ下にオレンジと緑がありますね。黄色が見えづらいのは直感的に理解できますが、その近くにある色たちにも注意が必要なんです。
色弱の問題では赤と緑が有名です。きっと健康診断で下記の図を見せられ、どちらが見やすいか、質問された方も多いでしょう。
赤信号と緑信号の区別がつかないので、色の問題として最重要なものです。色だけで機能的な部分を表現するのはNGということは、すべてのアクセシビリティの教科書の１ページ目に書いてあるでしょう。
「緑オレンジ問題」は、それに比べるとクリティカルではありませんが、デザイナーさんがひっかかりやすいwebアクセシビリティ問題No.1といえます。
ブランドカラーがアクセシビリティ基準をクリアしていなかったら、どうしよう
アクセシビリティVSブランディング？
2020年3月、パンデミックで世が騒然となるなか、東京都は新型コロナウイルス感染症対策サイトをリリースしました。
このサイト、メインカラーが緑色です。……緑オレンジ問題の勃発だ！
緑色は、東京都のメインカラーで、「躍動、繁栄、潤い、安らぎ」を表現したものであり、そのイメージをこのサイトでも踏襲したそうです。ただ、このサイトで使用されている緑色がアクセシビリティ基準をクリアできていませんでした。
確かに、一番右の緑は見えづらいかも….。
そして、関係各所から「この緑はアクセシブルでないよ」と指摘が入ります。アクセシビリティを満たす濃い緑色は、あまり「躍動、繁栄、潤い、安らぎ」を感じさせるとは言えません….。デザイナーさんが緑色で表現したいこととは違う雰囲気です。
でも、「デザイナーが表現したいことのために、情報を求めている一部の人を切り捨ててよいのか」という意見が大勢で、議論の末、アクセシビリティを優先したカラーに落ちついています。
この議論の過程を追ったログは、色にまつわるアクセシビリティを考えるうえで素晴らしい知見が詰まっています。お暇なときにご一読ください。
これが一般企業であればどうでしょうか。
ファッション性を重視している企業であれば、アクセシビリティを無視して、ブランドの世界観を極めればよいのでしょうか。
でもそれは、「ある人々を切り捨てる」というメッセージを発していることになります。日本人男性の20人に1人は色弱です。あなたの知り合いにもいると思います。また、日本の法律では、webアクセシビリティへの対応を「努力義務」としています。
でも…….
デザイナーであれば、「アクセシビリティのために、ブランドイメージを違うものに変えてしまっていいのかなぁ…」と心のすみで思ってしまうのではないでしょうか。
ブランディングは一貫させたい、でもアクセシビリティは担保しなければならない…。大変困った事態です。
そんなときは、偉大な先達たちの仕事を参考にしましょう。
悩みのほとんどは、もうすでに誰かが悩んでいるものです。
【事例：緑編】 東京都 都庁総合ホームページ
まず東京都の公式サイトを見てみましょう。先ほどもありましたようにブランドカラーは緑色。
webサイトはどのようになっているでしょうか。
ブランドカラーの緑を、さらに濃くしたグリーンを使用しています。
これが、おそらく答えの一つでしょう。
ブランドカラーに似た同系色の色を作って「アクセシブル版ブランドカラー」を作るのです。
ちなみに東京都のサイト、2024年までのサイトはブランドカラーをガン無視してました。これもひとつの正解かもしれませんね。でも、「この紺色、どこから来たの…？」という気持ちにはなります…笑
【事例：オレンジ編】 au
次はauのwebサイトを見ていきます。ご存知の通り、ブランドカラーは問題のオレンジ。
ロゴで使用されているオレンジはアクセシビリティ未達です。やはりアクセシビリティ基準を満たすとオレンジが濁りますもんね。
では、webサイトはどうなっているでしょうか
アイコンやラインなど、装飾的なところにはブランドカラーを用いています。かたや、リンクできるところなど、画面をコントロールするところには黒い矢印を配置し、カタチでクリック可能を示しています。
こちらがもう一つの解答で、
・装飾的な部分にはブランドカラー
・機能的な部分にはアクセシビリティを満たしたカラー
を設定しています。
4通りの解決方法
ここまで見てきた通り、ブランドカラーがアクセシビリティ基準に達していない場合、少なくとも4通りの解決方法がありそうです。
「アクセシブル版ブランドカラー」を作る
装飾的な部分：ブランドカラー、
機能的な部分：アクセシビリティをクリアした色 を使うアクセシビリティを最優先（ブランドカラー無視）
ブランドカラー最優先（アクセシビリティ無視）
絶対的な正解はありません。上記のどれを選択するか、もしくは組み合わせるかは状況が決めるでしょう。関係者とコミュニケーションをとりながら、より良い方向を検討しましょう。
実は、緑がいちばん見やすい
昔のコンピュータの画面といえば、黒い背景に黄緑色の文字でした。
若い人は見たこと無いかもしれませんが、昔のパソコンはこんな感じでテキストが黄緑色だったのです。映画マトリックスでもその名残がありますね。
なぜ黄緑だったでのしょうか。
黄緑色の発色がコスト的に安かったのもありますが、実は人間にとって緑色（555nm付近の波長）が他の色より知覚しやすい、目に優しい色だったから だそうです。
なぜ緑が知覚しやすいのか、理由は正確にはわかっていませんが、進化の過程で草原や森など緑があふれる環境を見分ける能力が高い方が、生存に有利だったからだと言われています。
あれれ。では、なぜアクセシビリティの基準は、緑に厳しいのでしょうか。そのせいで東京都のコロナサイトの緑は濃くなってしまったのに…。
理由はシンプルで、基準を決める数式の方が、現実の見え方を必ずしも反映していないからのようです。（もちろん数式では赤・緑・青の中でも、特に緑に「重み」をかけて計算しているのですが…）
みんな一生懸命コントラスト比を測ってクリアしようとしているのに、そんなことあるんですね….
東京都のコロナサイトの緑は濃く（略）
WCAG2.2のコントラスト比は、「相対輝度」という数値の差だけで判断するため、緑は意外にも「見にくい色」とされてしまうことがあります。
左側の白文字の方が見やすいと思う人も多いのではないでしょうか…
でも、この緑色のボタンに白文字はNG、黒文字はOKなのです。
それが今のガイドラインです。
そして、次世代ガイドラインへ
実際、「輝度の差だけで見やすさを判断する」という基準には多くの批判があります。文字の太さや色相、さらには人間が実際にどう感じるかという心理的要素が無視されているため、「本当にそれで見やすさを測れるの？」という疑問が専門家の間で噴出していると言います。
その結果、現在開発中の次世代ガイドライン「WCAG 3.0」では、コントラスト評価の方法を根本から見直すことが検討されています。
これにより、今まで使えなかった緑が使えるようになるかもしれません。ガイドラインは社会を支えるものではありますが、絶対のものではなく、改善されていくものなのですね。
コメント