WCAG 2.0とWCAG 1.0に対応したコントラストチェッカー「WCAG Contrast checker」【Firefoxアドオン】

FirefoxアドオンのWCAG 2.0とWCAG 1.0に対応したコントラストチェッカー「WCAG Contrast checker」の紹介です。

前回、WCAG 2.0とWCAG 1.0に対応したコントラストチェッカー「Contrast-A」を書かせていただきました。本エントリーは前回の関連記事です。

WCAG 1.0のときのような十分な..分かりやすい...などの分かりにくい表現ではなく、WCAG 2.0では、4.5:1などのようにコントラスト比が明確に記述されています。

インストールすると、ステータスバーにアイコンが追加されます。そのアイコンをクリックすると画面左側に下記図のようなサイドバーが表示されます。

Foregrでは前景色、Backgrで背景色を確認することができます。

また、Ratioの項目を見てもらえば分かると思いますが、選択している色の比率も確認することができます。

このアドオンを用いて、本ブログのヘッダーの背景色と前景色(ロゴ)の確認を行いました。(下記図参照)

レベルAAの4.5:1の達成基準はクリアしていますが、レベルAAAの7:1では×になっていますので達成基準をクリアしていないことになります。

ですので、本ブログをレベルAAAに準拠させるためには、今の配色ではクリアできないことになりますので、改善しなければならなりません。

まとめ

レベルAAやレベルAAAに準拠させるのが目的であるならばこのアドオンは良いツールだと思います。

ダウンロード

WCAG Contrast checkerのダウンロードはこちらから