WCAG2.0 色のコントラスト「輝度コントラスト比」を測定

とある案件のデザインで色のコントラストを調べようとしたのですが、Web標準の日々のWCAG 2.0に関するセッションで「輝度コントラスト比」という指標が示されていたなぁ・・・と気付くものの、「どうやって調べるんだろう?」と思いいろいろ調べてみました。

(L1 + 0.05) / (L2 + 0.05)
L1はテキストの文字色あるいは背景色の明るいほうの輝度で、L2はテキストの文字色あるいは背景色の暗いほうの輝度。

注記 1: 色の輝度は、0.2126 * ((R / FS) ^ 2.2) + 0.7152 * ((G / FS) ^ 2.2) + 0.0722 * ((B / FS) ^ 2.2)と定義される。

  • R、G、そして B は、色のRGB値で赤、緑、そして青である。
  • FS は、R、G、そしてBのRGB値で最大のフルスケール (8ビットカラーチャンネルで255)。
  • "^" は、指数演算子である。

注記 2: 輝度の値の範囲は、0 (黒) から 1 (白)で、輝度コントラスト比の範囲は 1 から 21である。

出典:WCAG 2.0 ラストコール・ワーキングドラフト日本語訳 - 輝度コントラスト比

正直この式を見て計算しようという気にならなかったので(指数演算子って言われても・・・)、何かツールはないものかと探しておりました。

色の組み合わせをチェックしてみる(The Web KANZAKI)
「色の組み合わせ検証」という項目にそれぞれ「文字色」「背景色」にそれぞれ16進数のカラーコードや色名を入力し、組み合せテストボタンをクリックすると、文字色と背景色の明度差・輝度・色差の値をそれぞれ測定してくれます。

「特に輝度比はあまりしっくり来ないケースもあるかも知れません。」という注釈がついていますが、今のところ輝度コントラスト比を測定してくれるツールは神崎さんのサイトくらいではないでしょうか?カラー・コントラスト・アナライザーもまだ未対応なようですし。
さらに測定してくれるだけではなく、W3Cの各ガイドラインの基準を満たしているか否かのチェックまでしてくれるのが嬉しいですね。

最後にW3Cの各ガイドラインの基準をおさらいしてみます。
2007年5月17日に発表されたWCAG2.0ワーキングドラフトでは輝度コントラスト比という指標を示し、LevelAAでは輝度コントラスト比5:1以上に(WCAG2.0 1.4.3)、LevelAAAでは輝度コントラスト比7:1以上にする(WCAG2.0 1.4.5)と記されています。
明度差・色差についてはTechniques For Accessibility Evaluation And Repair ToolsのTechnique 2.2.1で、「明度差125以上、色差500以上(The rage for color brightness difference is 125. The range for color difference is 500.)」と記されています。

プロフィール

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

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

最新のエントリー