文字色が#666のときに背景色として使える色24色のまとめ

前回、前々回のコラムで、文字色が黒のときと#333のときにアクセシビリティの視点から背景色として使えるWebセーフカラーについて紹介しました。

• 文字色が#333のときに背景色として使える色90色のまとめ(2012年5月7日)
  http://web-tan.forum.impressrd.jp/u/2012/05/07/12696
• 文字色が黒のときに背景色として使える色141色のまとめ(2012年4月2日)
  http://web-tan.forum.impressrd.jp/u/2012/04/03/12500

今回は#333と並んで、ウェブサイトにおいて文字色として使用されることの多い#666について、文字色が#666の時、アクセシビリティの視点から背景色として使えるWebセーフカラーについて調べることにしました。

やってみたこと

文字色を #666666 に固定して、背景色を#000000から#ffffffまで変えていった場合のコントラスト比と、白内障、第1色覚（赤）、第2色覚（緑）、第3色覚（青）の4つの視覚特性における見やすさ、そして私の主観的な見やすさについて調べています。

コントラスト比はカラーコントラストアナライザーでチェックし、JIS X 8341-3:2010の「最低限のコントラストに関する達成基準(7.1.4.3)(AA)」への適合、および「より十分なコントラストに関する達成基準（7.1.4.6）(AAA)」への適合を調べています。達成基準7.1.4.3では4.5：1以上のコントラスト比（大きな文字の場合は3：1）、7.1.4.6では7：1（大きな文字の場合は4.5：1）以上のコントラスト比を要求しています。ここで「大きな文字」とは半角英数字であれば18pt、または14ptの太字、日本語や韓国語、中国語の場合は22pt、または18ptの太字以上の文字と定義されています。

また4つの視覚特性における見やすさはFujitsu ColorSelectorでそれぞれ調べました。

• カラーコントラストアナライザー
  http://www.infoaxia.com/tools/cca/index.html
• Fujitsu ColorSeloctor
  http://jp.fujitsu.com/about/design/ud/assistance/colorselector/

コントラスト比4.5:1以上の色はたったの24色

調査の結果、文字色が#666の時に背景色として使える（コントラスト比が4.5：1以上）Webセーフカラーはたったの24色しかないことがわかりました。文字色が黒の時に使える色141色、#333の時に使える色90色と比べると、使える色がかなり制限されてしまいます。また、JIS X 8341-3:2010の達成基準7.1.4.6で求めている「7：1以上のコントラスト比(AAA)」を満たす色は1つもありませんでした。文字色を#666にした時点で、達成基準7.1.4.6を満たすことが難しくなるということです。さらに、以下の表を見ていただくとわかるとおり、私の主観として、すべての組み合わせで文字を判読できませんでした。

以下、調査の結果コントラスト比が4.5:1以上となった24色を紹介します。カラーコードのあとの数値は#666とのコントラスト比です。

実際のカラーサンプル、JIS X 8341-3:2010への適合状況、視覚特性ごとの見やすさなどの詳細については、Cocktailzウェブサイトに掲載していますので参考にしてください。

• 文字色が#666のときに背景色として使える色24色のまとめ：Cocktailz
  http://cocktailz.jp/column/viewpoint/24colors.html

実際のカラーサンプル、JIS X 8341-3:2010への適合状況、視覚特性ごとの見やすさなどの詳細については、Cocktailzウェブサイトに掲載していますので参考にしてください。

• 文字色が#666のときに背景色として使える色24色のまとめ：Cocktailz
  http://cocktailz.jp/column/viewpoint/24colors.html