アクセシビリティチェックツール「Color Contrast Checker」

WebAIMより、気軽にアクセシビリティチェックができるアクセシビリティチェックツール「Color Contrast Checker」を紹介します。

WebAIMは、Web Accessibility in Mindの略で、アクセシビリティに関する情報を配信しています。

acc0903101.jpg

Foreground colorのテキストボックスにフォントの色、Background colorのところに背景色となるカラーコードをそれぞれ入力します。

すぐ下にあるNormalとTextとLarge TextにそれぞれあるWCAG AAとWCAG AAAがPassになっていればOKです。

acc0903102.jpg

これは、W3Cに基づく明度差と色差で下記のような計算式を用いて計算します。

明度差

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

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

色差

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

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

この「Color Contrast Checker」は、上記の計算式をカラーコードを入力するだけで、自動で計算してくれるツールです。
ぜひ、サイト製作の時に活用してください。