環境によらない「読める色」を提供できるコントラスト比の達成を

2016年版のWebコンテンツJIS(JIS X8341-3:2016)では、W3Cが勧告したWeb Content Accessibility Guidelines(WCAG)2.0の内容と同じものになっています。各国で基準が異なるというのもおかしな話ですので、世界的な標準となるWCAG2.0に従ったというのは大変評価できることだと思います。

2004年版では「背景色と文字色で十分に明度差を付けなさい」とか「色だけで情報を区別せずに、文字情報と合わせて使いなさい」と言ったような、言ってみれば大雑把な指針が示されただけなのですが、2010以降では、最も重要な部分として、きちんと数値化された達成基準が示されたことにあります。

文字コントラストの達成基準

2016年版では文字色の達成基準は文字コントラストによって示されています。文字コントラストは以下の式で表されます。

コントラスト比 (L1 + 0.05) / (L2 + 0.05)

このL1は明るい方の色の相対輝度、L2は暗い方の相対輝度を表します。ではこの相対輝度はどのように計算されるかと言いますと、

相対輝度
L = 0.2126 * R + 0.7152 * G + 0.0722 * B

また新しいRGBという記号が出てきましたが、こちらについては、

  • if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
  • if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
  • if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

として定義されております。ついでにRsRGB、GsRGB、および BsRGB は

  • RsRGB = R8bit/255
  • GsRGB = G8bit/255
  • BsRGB = B8bit/255

このような式で計算されます。この計算結果は1:1~21:1の間の値を取るのですが、この比が4.5:1を超えていれば達成基準AAをクリア、7:1を超えていれば達成基準AAAをクリアしていることになります。

また大きいサイズの文字(半角英数字なら18あるいは14ポイント以上の太字、日本語のフォントであれば22あるいは18ポイント以上の太字)の場合には、達成基準AAを満たすためには3:1、達成基準AAAを満たすためには4.5:1というように、フォントのサイズによっても基準は変わってきます。

とは言え、このような複雑な計算を毎回やってられませんので、インフォアクシアさんが提供されているカラー・コントラスト・アナライザー 2.2 日本語版を利用することにしましょう。

実際の配色とコントラスト比

では背景色が白い場合のコントラスト比を実際に見てみましょう。12ptと18ptの文字を用意しました。背景色は#FFFFFFの白、文字色は#000000の黒から#111111、#222222のように順に明るくしていきます。

12ポイントの文字のコントラスト比
文字色 コントラスト比 達成基準AA 達成基準AAA
#000000 21:1 OK OK
#111111 18.9:1 OK OK
#222222 15.9:1 OK OK
#333333 12.6:1 OK OK
#444444 9.7:1 OK OK
#555555 7.5:1 OK OK
#666666 5.7:1 OK NG
#777777 4.5:1 OK NG
#888888 3.5:1 NG NG
#999999 2.8:1 NG NG
18ポイントの文字のコントラスト比
文字色 コントラスト比 達成基準AA 達成基準AAA
#000000 21:1 OK OK
#111111 18.9:1 OK OK
#222222 15.9:1 OK OK
#333333 12.6:1 OK OK
#444444 9.7:1 OK OK
#555555 7.5:1 OK OK
#666666 5.7:1 OK OK
#777777 4.5:1 OK OK
#888888 3.5:1 OK NG
#999999 2.8:1 NG NG

12ポイントの方では白(#FFFFFF)の背景色に対し、文字色#777777までなら達成基準AAを、#555555までなら達成基準AAAもクリアすることが出来ます。次に大きなフォントとされる18ポイントの方では、#888888までで達成基準AAを、#777777までで達成基準AAAをクリアすることが出来ます。

もちろんフォントの形状などによっては、見やすさは変わってきますので、「最低限」とされるAAではなく、「より十分」なAAAを目指していくのがよいでしょう。また、この基準をクリアしたからと言って、読みやすいとは限りません。特に加減ぎりぎりになってくると、色相などによっても読みにくく感じてしまうでしょう。

背景色が#FFFFFFの白の場合に限って言えば、背景色と文字色との差が小さいほど柔らかい印象に見えますが、私の個人の主観としては、柔らかさを表現するために文字色を#666666以上の明るさにする必要を感じません。もしそれが必要なのであれば、その他の部分の色で表現することが可能だからです。

文字のポイント数で基準が変わるのが少しややこしいですが、1ポイントって何ピクセルなの?とか余計なことを考えてしまいますので、一律でAAは4.5;1、AAAは7:1と考える方がすっきりするでしょう。

今回のJISの改訂は「こうした方がよい」と言うものではなく、「こうあるべきである」と言うことを示したものです。Webや色彩のプロフェッショナルがまず範を示し、広く世の中に知らしめるようにしたいものです。