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

文字色を#333にしたとき、アクセシビリティの視点から背景色として使える色について調べてみました

Cocktailz 2012/5/7 23:47 UX／CX | コラム

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

この記事はユーザー記事として投稿されたものですが、優れた内容ですので通常記事に格上げされました。

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

文字色が黒のときに背景色として使える色141色のまとめ（Web担当者Forum）
http://web-tan.forum.impressrd.jp/u/2012/04/03/12500

この記事にはたくさんの反響がありました。その中には「実際にウェブ制作で使われるのは#000ではなく#333や#666なので、こちらについても調べてほしい」というコメントもいただきました。

先天性の弱視である私自身、以前からウェブを使っている中で「この文字色はいわゆる真っ黒じゃなくて濃いグレーなんだな。なんでこういう色を使ってるんだろう。読みにくいなあ」と感じていました。そこで文字色が#333の時、アクセシビリティの視点から背景色として使えるWebセーフカラーについて調べることにしました。

やってみたこと

文字色を #333333 に固定して、背景色を#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 ColorSelector
http://jp.fujitsu.com/about/design/ud/assistance/colorselector/

コントラスト比4.5:1以上の色は90色

調査の結果、文字色が#333の時に背景色として使える（コントラスト比が4.5：1以上）Webセーフカラーは90色であることがわかりました。前回の結果と比べると、51色も使える色が減っています。また、私の主観として「この組み合わせは見やすい」とはっきり言える色は1つもありませんでした。「読めるが読みづらい」を表す△もたった15色、残りの75色は文字を判読できませんでした。

実際のカラーサンプル、コントラスト比、JIS X 8341-3:2010への適合状況、視覚特性ごとの見やすさなど、調査結果の詳細は私のウェブサイトで公開しています。

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

以下に、調査の結果背景色として使える、コントラスト比4.5：1以上の色90色をリストアップします。後ろの数値は文字色#333とのコントラスト比です。

背景色	表示サンプル	コントラスト
#00cc00	サンプル	5.8:1
#00cc33	サンプル	5.8:1
#00cc66	サンプル	5.9:1
#00cc99	サンプル	6.1:1
#00cccc	サンプル	6.3:1
#00ccff	サンプル	6.7:1
#00ff00	サンプル	9.2:1
#00ff33	サンプル	9.2:1
#00ff66	サンプル	9.3:1
#00ff99	サンプル	9.5:1
#00ffcc	サンプル	9.7:1
#00ffff	サンプル	10.1:1
#33cc00	サンプル	5.9:1
#33cc33	サンプル	5.9:1
#33cc66	サンプル	6.0:1
#33cc99	サンプル	6.2:1
#33cccc	サンプル	6.4:1
#33ccff	サンプル	6.8:1
#33ff00	サンプル	9.3:1
#33ff33	サンプル	9.3:1
#33ff66	サンプル	9.4:1
#33ff99	サンプル	9.6:1
#33ffcc	サンプル	9.8:1
#33ffff	サンプル	10.2:1
#6699ff	サンプル	4.6:1
#66cc00	サンプル	6.1:1
#66cc33	サンプル	6.2:1
#66cc66	サンプル	6.3:1
#66cc99	サンプル	6.4:1
#66cccc	サンプル	6.7:1
#66ccff	サンプル	7.0:1
#66ff00	サンプル	9.5:1
#66ff33	サンプル	9.6:1
#66ff66	サンプル	9.7:1
#66ff99	サンプル	9.8:1
#66ffcc	サンプル	10.1:1
#66ffff	サンプル	10.4:1
#9999cc	サンプル	4.7:1
#9999ff	サンプル	5.0:1
#99cc00	サンプル	6.6:1
#99cc33	サンプル	6.6:1
#99cc66	サンプル	6.7:1
#99cc99	サンプル	6.9:1
#99cccc	サンプル	7.1:1
#99ccff	サンプル	7.5:1
#99ff00	サンプル	10.0:1
#99ff33	サンプル	10.1:1
#99ff66	サンプル	10.1:1
#99ff99	サンプル	10.3:1
#99ffcc	サンプル	10.5:1
#99ffff	サンプル	10.9:1
#cc9900	サンプル	4.9:1
#cc9933	サンプル	4.9:1
#cc9966	サンプル	5.0:1
#cc9999	サンプル	5.2:1
#cc99cc	サンプル	5.4:1
#cc99ff	サンプル	5.8:1
#cccc00	サンプル	7.3:1
#cccc33	サンプル	7.4:1
#cccc66	サンプル	7.5:1
#cccc99	サンプル	7.6:1
#cccccc	サンプル	7.9:1
#ccccff	サンプル	8.2:1
#ccff00	サンプル	10.8:1
#ccff33	サンプル	10.8:1
#ccff66	サンプル	10.9:1
#ccff99	サンプル	11.0:1
#ccffcc	サンプル	11.3:1
#ccffff	サンプル	11.6:1
#ff6699	サンプル	4.6:1
#ff66cc	サンプル	4.8:1
#ff66ff	サンプル	5.2:1
#ff9900	サンプル	5.9:1
#ff9933	サンプル	5.9:1
#ff9966	サンプル	6.0:1
#ff9999	サンプル	6.2:1
#ff99cc	サンプル	6.4:1
#ff99ff	サンプル	6.8:1
#ffcc00	サンプル	8.4:1
#ffcc33	サンプル	8.4:1
#ffcc66	サンプル	8.5:1
#ffcc99	サンプル	8.6:1
#ffcccc	サンプル	8.9:1
#ffccff	サンプル	9.2:1
#ffff00	サンプル	11.8:1
#ffff33	サンプル	11.8:1
#ffff66	サンプル	11.9:1
#ffff99	サンプル	12.0:1
#ffffcc	サンプル	12.3:1
#ffffff	サンプル	12.6:1