Help us understand the problem. What is going on with this article?

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

More than 3 years have 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の基準値ギリギリを攻めるのはやめたほうがよさそうです。

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

コントラストチェッカーを統一しておくと
特に複数人で開発を行う場合、算出されるコントラスト比が異なることによって
無駄なコミュニケーションコストが発生することを抑えられます。

まとめ

コントラストチェッカーは便利なツールですが、ともすると余計なコストを生じさせてしまいます。
それぞれのチェッカーが出力する結果に差異があることを理解しておきましょう。

sukoyakarizumu
JavaとJavaScriptでWebサービス開発してます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした