(このページは、今後「随時更新」になると思います)
ああコントラスト悲┆文字色に緑もオレンジも使えない┆
コントラスト比の 分厚い壁 テキストリンク
私がアクセシビリティ対応で一番大変な思いをしたのは、実は、
「2018年にレスポンシブ対応のために入れまくった特殊文字の空白文字をCSSに全て置き換え」
(当時、HTML文法的にも間違ってはいないし良かれと思って実行したのに・・・)
でしたが、2番目に大変だったのは普通に「コントラスト比対応」でした。
曖昧難解なガイドラインを一通り読んで程なく、コントラスト比の厚い壁(「高い壁」ではなく、向こう側は見えるけど行けない「分厚い壁」)に阻まれ・・・
「遵守は絶対無理！一部遵守をゴールに目指そう」になりました。
「たかがコントラスト比4.50が無理？冗談でしょ？ベースの文字色を目に優しい#333333にしたとしても、背景色#9b9b9b(ミドルグレー)まで濃くできるんだから楽勝！」
と思った方は、きっと、文章中にもページ最上部のナビにも一切テキストリンクを入れない前提なのでしょう。
しかし普通は、文章中やナビにテキストリンクを全く入れない、というのは稀だと思います。
コントラスト比4.50がサイトの作り手にとって過酷な条件なのは、
「コントラスト比は、文字と名の付くものには(限られた例外を除き)等しく適用される」からです。
リンク文字のlink・visited・ボタン(見た目がボタンのものを含む)内の文字と背景色・・・
これらを考えると、ベース文字色が#333333ぐらいだと背景色は実質真っ白か真っ白同然の色に限られてきます。
が、それでも尚リンク色選択の幅は激狭です(特に、色のみ変更のテキストリンクは、「隣接する文字色とのコントラスト比が3.00以上」の条件も加算)
(私の場合、たまたま、別に運営中のWebサイトWindows11 Screen Customize Tipsのリンク色を、グレーからグリーンに変えようかと検討中だったのですが、コントラスト比が4.00にも届かずでどうにもならず、やむなく断念になりました。
(因みに、hoverに採用しているグリーンはコントラスト比4.50ちょうどですが、hoverは常時見えているわけではないので多少は濃過ぎても許容))
ところで、グリーンといえば、オレンジほどではありませんがどちらも
「人間の目にちょうど良く見える濃さだとコントラスト比が低過ぎ、コントラスト比を上げると最早全然別の色」
でWebクリエーター泣かせの色だったりします。
それでもグリーンはまだ妥協すれば何とかなるでしょうが(私は原則妥協せずに、使えないならグレーで代用します)、オレンジの背景に白抜き文字とかとなると泣く羽目になります。
(私みたいに非営利の個人サイトなら、「個人は法律適用外だし別にオレンジ堂々と使いまくっていいんだけど特別使いたくはないし、でも、あえて(コントラスト比制限のない)タイトルロゴに使っておくか」で終了ですが、企業だとクライアントさんに泣きつかれたらどうするんでしょう？)
コントラスト比の分厚い壁(ボタンの形をしているもの)
私のサイトWindows Screen Customize Tipsの場合、"<main>の長文部分"はコントラスト比を最低限確保してもできる限り元のレイアウトのままに見えるように頑張ってかなり成功しましたが、ナビゲーション部分はそうはいきませんでした。
まず、下の画像は以前のページ上部のメニュー(擬似)ボタンとナビゲーションメニュー：
次いで、2024年までのページ下部ナビゲーションエリアのリンクボタン：
・・・ページ上部メニュー(擬似)ボタン自体は一見それほど見た目は変わっていませんが(変わらないように頑張りました)、ナビゲーションエリア内部は大幅に変えざるを得ませんでした。
(ページ上部ナビゲーションに関しては、大幅変更は別の理由が大きいのですが、ここでは割愛します)
一方、ページ下部ナビゲーションエリアは、もうどうにもならなくて抜本的にレイアウト変更になりました。
(ページ上部のとは違い、変わったのは見た目だけ)
(実は、フォームページの送信ボタンも似たようなデザインなのですが、フォームページのボタンの方は、背景色はもっと濃いもののコントラスト比はやはり足らず、非テキストの矢印記号使用でコントラスト比条件を3.00に下げ、それでも足りないのでコントラスト比3.00の色で細く縁取りして基準を満たさせています)
※非テキストのコントラスト比がテキストより緩くて3.00なのは正直本当に助かります。
(ページ上部ナビゲーションのメニュー(擬似)ボタンの(プラス記号)とかナビゲーション中の「現在地アイコン」とか・・・もし4.50だったら詰んでました)
"ピンポイント"でコントラスト比調整は大変
(私の理解が正しければ)ガイドラインによると、
「単色でない場合のコントラスト比は、テキスト色や背景色の一番明度が低い(ダークモードの場合は逆)箇所から換算して4.50以上或いは3.00以上」
って事は、
「例えば、真っ白な背景に#333333ほとんど黒の細い斜線が入ってたら、テキスト色のコントラスト比は#333333から起算？？(ありえない！)」
・・・と思いつつも、私が背景に使っている模様やグラデーションはそこまでの差はないので、頑張ってその箇所毎にコントラスト比を割り出して調整していますが、はっきり言って、超面倒です。
テキスト強調色・リンク色・アイコン色・記号色はまだ面倒なだけですが、難関はフォーカス枠の色・・・
レイアウトを考えたら、「条件が厳しい方に合わせて色統一」ではNGで、箇所毎に細かく色指定(色相彩度も細かく調整)必須です。
(私の各サイトに来るユーザーの大多数はマウス使用だと推測できますが、「マウス故障電池切れで急遽キーボードに切り替え」もあり得るので、やはりレイアウトの手抜きはできません)
※なお、フォーカスは枠線必須ではなく、太字・斜体・下線・上線・上下線などでもOKだそうですが、実用性メンテその他諸々考えると「枠線に統一が無難」でしょう。
(私を含め、ネットはもっぱらマウスの人にとっては、「フォーカス＝ダサい枠線が表示」が常識ですし・・・
「枠線を2ピクセルのridge、色はrgbaで透過指定(ridge線の濃さの差を小さくする)、ごく控え目に角丸」にすれば少しはオシャレに見えますが、コントラスト比がギリギリの場合色調整するのが結構面倒なので、私のサイトの場合、フォーカスを見る人の割合を考えると実施は)
また、枠線の色調をページ内でコロコロ変えるのは好ましくないと思います。
(と言いつつ、当サイトにおいては基本的には<main>とそれ以外でフォーカス枠色を変えていますが、「タイトルロゴにオレンジ系を使っているための調整で、特殊ケース」)
「アイコンにテキストを付加？？・・・無理！」な理由
(当初、この項目は独立したページに記載の予定でしたが、当ページ内に載せる事にしました)
かつて、私は「レイアウトを損なうからアイコンは使わない」派でした。
が、スマホ時代に突入し、(私のサイトに来る人のほとんどはPCからだと思われますが)<a title="新規ウインドウで開きます">をマウスhoverで見られないユーザー対応のため、アイコン導入に踏み切りました。
そのために、「ページの雰囲気を壊さないように淡い色合いで、でも情報は確実に伝わるように」と、CSS初級者ながら頑張ってカスタマイズしてアイコンをいくつか作りました。
アクセシビリティを知った当初、「コントラスト比4.50以上」と早合点して、「無理！特に塗りつぶしの現在地アイコンとか濃過ぎ！」で片づけようとしましたが、程なく3.00以上と気付き、「それなら何とか」と気を取り直して微調整しました。
が、この一文：
「アイコンにはテキストを付加しましょう」
「え？冗談でしょ？」
・・・私にとってアイコンとは、
「利便性のため、レイアウトとトレードオフでやむなく採用するもの、だから、目障りにならないように細心の注意を払って使用」
なのに、テキスト添えた結果レイアウト損ねたら意味ない・・・
(注：勿論、スクリーンリーダーユーザー向けに不可視テキスト添えるのは大前提)
まあ「アイコンにテキストのラベル(付加)」は必須要件ではないので、できなければ仕方ないで無視すればいいだけですが、「アイコンにテキスト」言う人は、肝心な事忘れてます。
「アイコンはコントラスト比3.00以上でも、添えるテキストのコントラスト比は4.50以上」
(どうしても、というなら、極小サイズの字で書くしかないという・・・書く意味ない)
(コントラスト比に関しては(コントラスト比だけではないですが)細かい部分で基準など分からない所がいくつかあるので、判明したら当ページに追記したいと思っています)