1. sukoyakarizumu

    Posted

    sukoyakarizumu
Changes in title
+コントラストチェッカーのばらつきと対策
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,106 @@
+これは、[Web Accessibility Advent Calendar 2016](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つのコントラストチェッカーを検証しました:
+
+ * [Colour Contrast Analyser(v2.4.0.9)](https://www.paciellogroup.com/resources/contrastanalyser/)
+ * [ColorTester](https://alfasado.net/apps/colortester-ja.html)
+ * [WebAIM: Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
+
+## 検証方法
+
+以下の表に示すように、前景色と背景色の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で不適合となるツールがある。
+
+このような状況では、何も対策を行わないと、
+選んだ色がWCAG2.0に適合しているかどうかの判断が、人によって異なってしまったり
+コントラスト比の値に認識の違いが発生し、無駄なコミュニケーションコストが生じる可能性があります。
+
+# 対策
+
+## コントラスト比に余裕を持たせる
+
+4.6:1など、WCAG2.0の基準値に対して余裕を持たせるようにすると、
+ツールによる適合結果のばらつきが生じにくくなります。
+WCAG2.0の基準値ギリギリを攻めるのはやめたほうがよさそうです。
+
+## 使用するコントラストチェッカーを統一する
+
+コントラストチェッカーを統一しておくと
+特に複数人で開発を行う場合、算出されるコントラスト比が異なることによって
+無駄なコミュニケーションコストが発生することを抑えられます。
+
+# まとめ
+
+コントラストチェッカーは便利なツールですが、ともすると余計なコストを生じさせてしまいます。
+それぞれのチェッカーが出力する結果に差異があることを理解しておきましょう。