Edited at

コントラストチェッカーのばらつきと対策

More than 1 year has passed since last update.

これは、Web Accessibility Advent Calendar 2016の10日目の記事です。

この記事では、アクセシビリティの検証で重要なコントラストチェッカーについてお話します。


コントラストチェッカーとは?

アクセシビリティに配慮したWeb制作を行うにあたって重要な項目のひとつは、

文字色(前景色)と背景色の選び方です。

それぞれの色に差異がない場合、文字を認識することが困難になり、

アクセシビリティが低下してしまいます。

コントラストチェッカーとは、2つの色のコントラスト比を計算し、

W3Cが定めたWebアクセシビリティの基準(WCAG2.0)に適合しているかを検証するツールです。

WCAG2.0には、コントラスト比を以下のように定めるよう規定されています。


1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)

大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。

...

1.4.6 コントラスト (高度) : テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AAA)

大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 4.5:1 のコントラスト比がある。

...


コントラストチェッカーには色々な種類がありますが、

それぞれ、コントラスト比の計算方法やWCAG2.0への適合結果に違いがあります。

この記事では、その差異を簡単に検証し、差異に対する対策を考えます。


コントラストチェッカーの検証


検証したツール

以下3つのコントラストチェッカーを検証しました:


検証方法

以下の表に示すように、前景色と背景色の3つのパターンを考え、それぞれのツールで測定したときに、

コントラスト比と、WCAG2.0への適合結果がどう変わるかを調べました。

前景色
背景色

パターン1
#F00000
#FFFFFF

パターン2
#EF0000
#FFFFFF

パターン3
#EE0000
#FFFFFF


検証結果


[パターン1] 前景色: #F00000, 背景色: #FFFFFF の場合

ツール
コントラスト比
通常サイズAA
通常サイズAAA
大きな文字 AA
大きな文字 AAA

Colour Contrast Analyser
4.5:1
適合
不適合
適合
適合

ColorTester
4.4:1
不適合
不適合
適合
不適合

WebAIM
4.46:1
不適合
不適合
適合
不適合


[パターン2] 前景色: #EF0000, 背景色: #FFFFFF の場合

ツール
コントラスト比
通常サイズAA
通常サイズAAA
大きな文字 AA
大きな文字 AAA

Colour Contrast Analyser
4.5:1
適合
不適合
適合
適合

ColorTester
4.4:1
不適合
不適合
適合
不適合

WebAIM
4.5:1
不適合
不適合
適合
不適合


[パターン3] 前景色: #EE0000, 背景色: #FFFFFF の場合

ツール
コントラスト比
通常サイズAA
通常サイズAAA
大きな文字 AA
大きな文字 AAA

Colour Contrast Analyser
4.5:1
適合
不適合
適合
適合

ColorTester
4.5:1
適合
不適合
適合
適合

WebAIM
4.53:1
適合
不適合
適合
適合


検証結果から気づくこと

上記の結果から、以下のことがわかります:


  • ツールによって、色の適合/不適合の結果に違いがある。

  • ツールによって、算出されるコントラスト比にも違いがある。

  • コントラスト比が4.5:1 と算出されても、通常サイズAAで不適合となるツールがある。


対策


コントラスト比に余裕を持たせる

4.6:1など、WCAG2.0の基準値に対して余裕を持たせるようにすると、

ツールによる適合結果のばらつきが生じにくくなります。

WCAG2.0の基準値ギリギリを攻めるのはやめたほうがよさそうです。


使用するコントラストチェッカーを統一する

コントラストチェッカーを統一しておくと

特に複数人で開発を行う場合、算出されるコントラスト比が異なることによって

無駄なコミュニケーションコストが発生することを抑えられます。


まとめ

コントラストチェッカーは便利なツールですが、ともすると余計なコストを生じさせてしまいます。

それぞれのチェッカーが出力する結果に差異があることを理解しておきましょう。