webアクセシビリティ、デザイン面での最初の難題「緑オレンジ問題」を考える｜加藤朋義

「このボタンは目立たせたいから、オレンジにしよう！」 そう思ってデザインすると、「このオレンジはアクセシビリティ未達です」と指摘が入る。 目立つ色を使ったのに、アクセシビリティに達していない。そんなちょっと腑に落ちない経験をしたことないでしょうか。 ここではデザイナーさんがひっかかりやすいwebアクセシビリティ問題No.1（個人調べ）といえる緑オレンジ問題を詳しくみていき、解決方法を考えます。 「緑オレンジ問題」とは冒頭のように、ボタンを目立たせようとしてオレンジ色を選んだ瞬間、アクセシビリティ上で問題が発生する可能性があります。 ↓ 以下のボタンをご覧ください。 良い感じのオレンジだと感じる人が多いかと思います。 しかし、このオレンジはアクセシビリティ基準をクリアしていません。 （ここでいう「アクセシビリティ基準」とはWCAG2.2レベルAAを元にします。初心者の方は「なんかみんなが基準

[lastline]

当方、色覚異常だが"著者"が示す「アクセシビリティ基準」に従った色がとても見づらい⋯⋯ / メガネを作る際に赤と緑の見やすさを聞かれるのは、色覚異常検査ではなく色収差を利用した度数の確認です。

[ivory105]

緑に黒文字がOKの時点で参考するに値しないと思ってる。改定待ち

[u_eichi]

ユニバーサルデザイン関連の仕事でWCAGの輝度問題には泣かされた…。アートディレクターと色監修の板挟み。｜当事者が見にくいんですね。なんともはや。

[flirt774]

オレンジのAPCAはこのスライドが分かりやすいかもです https://www.docswell.com/s/LIFULL/Z4QNQ1-2023-08-21-142435 より詳細な解説 https://note.com/madisonowsley/n/n0ca23fb51b84　難しくて面白い記事です

[DropOutSurf_JOY]

現場的に長いこと思ってたのは｢モノクロモード｣策定してくれ。マークアップ言語だし情報と構造はきちんとするからクライアント（ブラウザ）かUserCSS当てるなりで対処してくれ。リーディングモードがそれに近い。

[zxcvdayo]

ChromeのDevToolsは試験的機能で、WCAG3で採用濃厚なコントラストの新基準（APCA）が有効化できる https://developer.chrome.com/blog/new-in-devtools-89?utm_source=devtools&utm_campaign=stable&hl=ja#apca 色選択しにいかないと見れないから面倒だけど

[xlc]

怪文書。黒に緑は「木々の緑は目に良い」の連想から来た誤りだと思う。使ったことがある人ならわかるが、長時間見続けると補色でしばらく世界がピンクになる。緑とオレンジは色覚異常対策では？

[neet_modi_ki]

一番最後の例（緑に黒）、現行の基準は正しく機能してないのではないかと疑わせるのに充分なような…（改訂中とのことだが）

[queeuq]

色に意味を持たしたときそれが見分けられない見分けにくいだと困るという話で見分ける必要がないときにそれを使うのは構わんのでは。ナンジャモさん。ガイドラインokのぎりぎり攻めた例示だったりしない？

[dickbruna]

この著者、全然わかってないな。知識がないうえに、論理的思考もできないようで文章のロジックがめちゃくちゃ。

[jitojito]

ピーキーな例を出して使えないというのも乱暴な話でアクセシビリティのテストのほとんどが機械的にはテストが難しいし、最終的には人がどう知覚するかによるから見づらかったら調整すれば良いだけ。

[natu3kan]

赤と緑が見えない人の為に青のコントラストでやれば解決。レッド・グリーンテストって光の屈折の違いでメガネやコンタクトの度数が適正か確認する検査なんだな。

[gcyn]

『やぁ、色相環だよ』 やあ。

[mellhine]

難しいことは分からんが、緑背景黒字は見づらいだろ

[uunfo]

レッド・グリーン検査は色覚の検査じゃないし…。グラフの色をどうするかと文字色と背景色のコントラストは別の話だし…

[hgaragght]

ブコメにあるけど、自分に見やすい色組み合わせに自動で変換出来るようにするのが一番良いのでは？？リーディングモード。

[Fluss_kawa]

出してくるサンプルと話の持っていき方がすごくよろしくないが、でも今の基準がダメダメなことだけはわかった。

[estragon]

“現在開発中の次世代ガイドライン「WCAG 3.0」では、コントラスト評価の方法を根本から見直すことが検討されています”

[ghostbass]

緑地に白文字はコントラスト比12:1とかなので少々小さくても問題なさそうなんだがどうやって測った？

[manamanaba]

レッドグリーンテストは過矯正になってないかをチェックするもので色覚とはなんの関係もないです

[superultraF]

恥ずかしい記事ですね

[narukami]

主張にはあまり賛同できんなと思って読んでたがアクセシビリティ基準の方が微妙でもあるのか

[run_rabbit_run]

AWS関連の仕事してる時にテーマカラーのオレンジが全然コントラスト出なくて困ったよ

[FreeCatWork]

にゃんて難しいお話しにゃ！ボクにはよくわかんないにゃ。でも、緑とオレンジがダメってことは、ボクの毛の色もダメなのかにゃ？心配にゃ〜

[Knoa]

「なぜアクセシビリティの基準は、緑に厳しいのでしょうか」←記事内で勝手にぼんやり理解してるけど、古いコンピュータの緑は「黒地に明るい緑」だから、ぜんぜん話が違うよ。最初の色相環の話も微妙に的外れ(字数

[tk_musik]

多くの人が見づらいけど誰もが見ることはできる、という基準だと仮定すると、もしかして緑黒も必要な可能性もあるのでは、と思うこともある

[aike]

さわやかとか良い感じとか、その見え方自体が人によるというのがアクセシビリティの出発点ではある。あと区別しやすさが重要なので、隣接させたり種類を色で表現しない部分は基準も比較的ゆるくして良いと思う。

[lifeisadog]

いやそういうことではないでしょ。単体のボタンはボタンとして認識できれば何の問題もないよ。日本的な「正しさ」を勘違いしている感じがする

[emj1025]

WCAG 2だと不整合な部分も出てきちゃう。難しいっすね。そういうのもあってか、最近だとボタンには背景色を入れないデザインが増えてきた気がする。

[tettekete37564]

とめもためになった

[aceraceae]

コントラストはけっこう気をつけてるしコントラストがとれそうもないときは文字の周りに縁取り入れたりはしている。視認性が問題にならない装飾とそうでない部分で切り分けるのも妥当だと思う。

[toaruR]

知見やなぁ(*´д｀*) 目の前のガイドラインが必ずしも正しいとは限らないのか

[strawberryhunter]

個人的には1/20の赤緑色覚異常については支障が無いので無視して、かなり視力が弱い人を対象にするかどうかだけ考えれば良いと思う。つまり、普通にデザインして、白黒デカ文字バージョンを用意すればいい。

[mochinki]

すごく勉強になりました。自分の知識の浅さを痛感した