輝度コントラスト比も測定できるカラー・コントラスト・アナライザー 2.0

カラー・コントラスト・アナライザー キャプチャ画面

アクセシビリティのポータルサイト「Infoaxia」において、WCAG2.0の新基準である輝度コントラスト比によるチェックが可能になった「カラー・コントラスト・アナライザー 2.0」が配布されています。

以前、当ブログの「WCAG2.0 色のコントラスト「輝度コントラスト比」を測定」というエントリーの中で紹介させていただいた、The Web KANZAKIのページでは、色の16進数の値を入れる必要がありましたが、今回リリースされたカラー・コントラスト・アナライザー 2.0では、カラーピッカーによる色の取得ができますので、簡単に色のコントラストを調べることが出来るのではないでしょうか?

カラー・コントラスト・アナライザー 2.0のアルゴリズムの欄にある「輝度コントラスト比」にチェックをし、前景色・背景色を選択(もしくは16進数のカラーコードを入力)すれば、輝度コントラスト比を測定してくれます。
さらにWCAG2.0で定められているLevel AAでの達成基準輝度コントラスト比5:1以上(ただし、大きめのサイズの文字や画像の場合は3:1)、Level AAAでの達成基準輝度コントラスト比7:1以上(ただし、大きめのサイズの文字や画像の場合は5:1)を満たしているかどうかを測定してくれます。

ちなみに、当ブログ・ProjectDDで使われている紫(#A2297E)と背景色の白(#FFFFFF)の輝度コントラスト比は6.7:1で、Level AAでの達成基準は満たしているものの、Level AAAでの達成基準にはコントラストが足りないことがわかります。ただしロゴ画像のような大きな画像では、Level AAAでの達成基準が5:1になるので適合しているのではないかと思います。

カラー・コントラスト・アナライザー 2.0では輝度コントラスト比による測定以外にも、色覚特性によるモニターの見え方をプレビューできる「色変換シュミレーション」などの機能も加わっています。
デスクトップツールですので、ブラウザ上に表示されているものに限らず、モニター上に表示されているものであればほとんど測定できます。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー