Webサイトのカラーコントラストが一括でテストできるコントラスチェッカー「Check My Colours」

WCAGにおいても、書かれているWebサイトの配色のコントラストですが、これをWebサイトのURLを入力するだけで、一括でコントラストチェックしてくれるオンラインサービス「Check My Colours」の紹介です。

color0906131.jpg

検出は、そのWebサイトのHTMLの要素と属性をすべて抽出して、そこのフォントの色と背景色のコントラスト比を計算してくれます。下記が結果の一部です。

このサイトで検証しました。

color0906132.jpg

幸い、僕のサイトはすべてパスしました。さらにコントラスト比においてもトリプルAをいただき、可読性の高いサイトという評価になりました。

もし、エラーになると以下のような感じになります。

color0906133.jpg

エラーが出た場合は、WCAG2.0の下記の部分を読むことを推奨します。

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

WCAG2.0

しかし、このサービスは、すべてのHTMLの要素、属性になります、ですので、テキスト飛ばしなどの画像置換していても、そのテキストも対象になるので、注意してください。

僕のこのブログは、テキスト飛ばしをしてるので、その部分のみ、エラーになりました。