色のコントラストとアクセシビリティ

こんにちは、デザイン事業部のディレクターの中村です。
2024年4月に施行された「改正障害者差別解消法」の影響もあり、ここ最近はアクセシビリティ関連のご依頼がじわじわと増えてきました。
アクセシビリティの知見を深めるために社内でも勉強会を開いていましたが、それでもいざ対応を進めると思わぬ事態が起こったりします。
今回はタイトルにもある通り、色のコントラスト比について私が経験したことをまとめます。

事の発端

WCAG 2.1 または 2.2 のアクセシビリティ達成基準レベルAAには「1.4.3: コントラスト (最低限)：テキスト及び文字画像の視覚的提示に、少なくとも 4.5：1 のコントラスト比がある」という基準があります。（※例外あり）

既存サイトのアクセシビリティ対応にて、ボタンやテキストなどの色のコントラストに問題があり、この達成基準をもとに色調整をデザイナーさんにお願いしてました。

そこで「白文字+複数の背景色」で構成されたラベルの色について対応をお願いしていたのですが…。

図1：背景色はそのままで白文字から黒文字に変えて、コントラスト比を満たすように調整した結果

黒文字に置き換えると、最低限のコントラスト比を満たすことができるとのことで、最初にご提案いただきました。
下記は背景色と白文字・黒文字のコントラスト比の表になります。

確かに満たしているとはいえ、真ん中の黄色はこれで良さそうだけど、他は読みづらくなってるような…。

調整してくれたデザイナーさんにも聞くと、私と同じく黒文字にすると読みづらい部分があると感じているそう…。
しかし、白文字のままコントラスト比を満たすように背景色を調整すると、明度が下がって全体的に暗めの色になってしまうようでした。
ビビットカラーを用いることで、ポップな印象を与えたり目を引きやすくなるので、確かに悩ましいところです。
「黒文字+色付きの枠線」に調整してみるなど、デザイナーさんと色々確認しながら進めていきました。

色なんてコントラスト比を満たすように調整すればいいからそんな難しくない〜って思ってましたが、そんなことはなかったです。

もう一度確かめよう

まず、下記の図をご覧ください。

図2：りんご、みかん、ぶどうと書かれた3つのラベル画像

左から、りんご、みかん、ぶどう、とそれぞれ書いてあります。
文字は三つとも白（#fff）で、赤（#FF354A）、オレンジ（#F08300）、紫（#A660FE）の背景色を用いています。
これらの背景色と白文字のコントラスト比の表になります。

表に書かれている通り、これらはアクセシビリティとして最低限となるコントラスト比（4.5：1）を満たしていません。
視機能に問題がある一部の人にとっては、このラベルの文字が読みづらい可能性もあります。

では、これらのコントラスト比を満たすように文字色を黒（#000）に変えてみます。

図3：図2のテキストを黒文字に調整した例

黒文字にすることで、コントラスト比がそれぞれ4.5以上となり、最低限の比率を達成しています。
背景色と黒文字のコントラスト比の表になります。

とはいえ、白文字だった時よりも全体的に重くなった印象を受けます。
白文字はテキストが目立つけど眩しい、黒文字はテキストがあまり目立たなくなったけど目に優しくなった感じですかね。
ひらがな三文字だからいいものの、これが長めのテキストだった場合は真っ先に読みづらさを感じそうです…。

続いて、コントラスト比を満たすために今度は文字色ではなく背景色を同じベースで変えて調整してみます。

図4：図2の背景色をコントラスト比を満たすように調整した例

調整した背景色と白文字のコントラスト比の表になります。

黒文字に変えたときよりも見やすくはなっていますが、正常な視機能を持つ人から見ると全体的にくすんだ色味になったと感じるでしょう。
このみかんの色なんて、腐ったみかんみたいな色じゃないですか…。
そもそもオレンジ色と言っていいかどうかも怪しいです。
デザイナーさんが言ってた通り、白文字で背景色を調整すると、どうしても暗めの色になってしまいます。
もし、暗めの色を許容できない場合は、色のベースを変えたり違った表現で修正する必要があります。

これらの結果を見ると、機械的にチェックツールを使ってコントラスト比を満たしたからといって、満足にアクセシビリティ対応できてると言えないでしょう。
色を調整して目視した時の「違和感」が重要になります。

APCA（Advanced Perceptual Contrast Algorithm）

白文字の方が見やすい気がするけど、コントラスト比においてはNGとなってしまう。
今回のような状況に関係するのが、APCA（Advanced Perceptual Contrast Algorithm）という次世代のコントラスト評価手法になります。
現在のWCAG 2.1や2.2で使われている単純な相対輝度ベースの計算に代わるものとして、WCAG 3.0で導入が検討されています。

現在使われているコントラストのガイドラインはスマートフォンなどが登場する前に作られた基準であり、全面的に見直しが必要になっていると言われています。
ただ色の相対輝度だけで判断するのではなく、人間の知覚も考慮する必要があると考えられています。
さらにそこに加えて、テキストの太さや大きさなどの色以外の要素も色の見え方に影響を与えるとのことです。
現在のコントラスト基準とAPCAの違いを表に簡単にまとめました。

Lc（Lightness Contrast）

Lc（Lightness Contrast）は、APCAで導入された新しいコントラストの指標になります。
APCAはコントラストを計算するための新しいアルゴリズムであり、LcはそのAPCAによって算出されるコントラストの値になります。
これまでの「テキスト (及び文字画像) とその背景の間に、少なくとも 4.5：1 のコントラスト比を確保する」のような相対輝度とは違う考え方で、人間の視覚の仕組みにより近い方法で「読みやすさ」を数値化しようとしています。
現在の基準は、コントラスト比が「4.5：1 以上であるか」という固定値なのに対し、Lcはフォントの種類や太さ・サイズに応じて設定された基準を満たすかどうかで判断します。
0〜±100以上の数値で表され、文字と背景の「明度差」による可読性の高さを人間の視覚に基づいて評価します。+の値は、白背景に黒文字のような「明るい背景 × 暗い文字」−の値は、黒背景に白文字のような「暗い背景 × 明るい文字」を指します。

下記の表はLcの目安値になります。
「Helvetica」または「Arial」のフォントを参照としています。

Lcの目安値についても、フォントが変われば見え方によって基準が変わる可能性もあります。
「Helvetica」などはLc75でも視認性として十分ですが、他のフォントはLc85以上でないと視認性が悪くなってしまうケースも考えられます。

このように、Lcはフォントの太さ、サイズに応じて基準を可変する柔軟性があり、コントラスト比4.5：1 を満たせばOK！のような一律にコントラスト比のみで判断しない点が重要になります。

まとめ

今回の出来事によって、人間の知覚を考慮する新たな基準が準備されているのを知ることができてよかったです。WCAG3.0で取り入れられた場合、現在のコントラスト比の基準よりもかなり複雑になっているので、アクセシビリティ対応が結構大変になりそうと思ったり…。
彩度の高い背景と白文字、黒文字について挙げましたが、ダークモードでアクセシビリティ対応をするときも同様のケースが起こるそうです。

とはいえ、現在の公式アクセシビリティ基準はまだコントラストの比率になっており、APCAを用いると法的基準と外れるので、今はこういう新しい基準があるんだなーと留めておくのがいいと思います。
コントラスト比率の基準が完全に間違っているわけではないので、あくまでも不十分なところを補うためにAPCAと併用してチェックしていくのがいいのかなと個人的には考えてます。
コントラストの件も含めて、今後のWCAG3.0は今の基準とどう変わるのかとても気になりますね！

参考サイト

解説書 達成基準 1.4.3: コントラスト (最低限)
The Easy Intro to the APCA Contrast Method
User:Myndex/Whitepaper – Silver
User:Myndex/APCA model – Silver