配色におけるコントラスについて

1年くらい前になるのですが、 Webサイトにおける配色についてというエントリを書きました。

久しぶりに、あるWebサイト(そのサイトを実際に表示させても良いと思うのですが、敢えて伏せさせていただきます。)を見て、そのサイトの配色のコントラスト比が標準と定められているのと大きく異なっていました。

WCAGでは、AAというレベルではありますが、以下のように書いています。

テキストおよび画像化された文字の視覚的な表現には、少なくとも 4.5:1 のコントラスト比をもたせる。

と、あります。

また、明度差と色差の計算方法が存在します。これも、Webサイトにおける配色についてに書いていますが・・・

明度差

((R×299)+(G×587)+(B×114))/1000

計算した値が125以上あれば読みやすいという判定。

色差

(maxR-minR)+(maxG-minG)+(maxB-minB)

計算した値が500以上あれば読みやすいという判定。

僕が、今日挙げているサイトの配色は下記のようになっています。

背景色が「#F2F0E9」、フォント色「#8D8376」です。

これを、上記の明度差は背景色とフォント色の2色を計算式にあてはめたそれぞれの数値の差によってもとまります。「#8D8376」のRGB値は(141, 131, 118)です。よって、

((141×299)+(131×587)+(118×114))/1000

よって、明度差は132.508となります。

「#F2F0E9」のRGB値は(242, 240, 233)になるので、よって、

((242×299)+(240×587)+(233×114))/1000

よって、明度差は239.8となります。

これらを引き算すると 107.292となり、125以上あれば読みやすいという判定にはなりません。

そして、色差は、2色のRGBの値の大きいほうをmaxと置き、小さいほうをminとおきます。よって計算式にあてはめると、

(242-141)+(240-131)+(233-118)

色差は、325となり、500以上あれば読みやすいという判定にはなりません。

この結果より、読みやすさを基準値通りに確保しておらず、アクセシビリティという点においては、配慮されていないような配色となります。

しかし、その配色でも文字を大きくすることで可読性が高まったりします。どうしても、そういう配色にしたい場合は、文字のサイズ変更することによってカバーすることができます。

僕が言いたいのは、かっこいいデザインが良いサイトではありません。アクセシビリティも確保しているサイトが良いサイトなのです。

ですので、配色においては、もっと考えるべきことがらです。

しつこいですが、このエントリにも書いていますが、コントラストチェッカー等あるので、サイトデザインの時にでも使うことを強くオススメします。