WCAG 2.0とWCAG 1.0に対応したコントラストチェッカー「Contrast-A」

WCAG 2.0とWCAG 1.0に対応したコントラストをテストすることができる「Contrast-A」の紹介です。

WCAG 2.0の達成基準では、下記のように背景色と前景色のコントラスト比が明確に記述されています。

1.4.3

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

1.4.6

より十分なコントラスト: テキスト及び画像化された文字の視覚的な表現には、少なくとも 7：1 のコントラスト比がある。(レベルAAA)

コントラスト比の計算式は下記リンクのWCAG2.0の実装方法集に載っています。

一応、下記がWCAG2.0の実装方法集に載っている公式です。L1とL2は相対輝度です。

(L1 + 0.05) / (L2 + 0.05)

L1とL2は相対輝度を求める公式も実装方法集に載っていますが、コントラスト比を計算するには、前景と背景色の相対輝度を求めて、上記の公式でコントラスト比を算出するわけですが、計算が得意の方は良いのですが、私のように計算が苦手な者にとって中々の作業です。しかし、このContrast-Aを用いれば計算をしなくてもコントラストをチェックすることができるわけです。

また、このContrast-Aの良いところは、コントラストのチェックのみではなく、その色が赤、青、緑などの色が弱いなどの色覚特異性や色盲の方に適応できるかどうかのシミュレーションも行うことができます。

ちなみにページ真ん中の下記の記述がるところです。

  • Protanopia（赤色覚異常）
  • Deuteranopia（緑色覚異常）
  • Tritanopia（青黄色覚異常）
  • Color Blindness（色盲）

これらのコントラスト比が明確に記述されている達成基準はレベルAAとAAAですが、これらの達成基準を目標とする場合には非常に活用できるツールです。