背景色が白のときに、アクセシビリティ視点から前景色として使える色78色のまとめ

ウェブサイトの見やすさ、文章の読みやすさを決めるコントラスト比について調べてみました。

Cocktailz 2011/10/13 0:26 UX／CX | 調査データ

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

ウェブサイトをデザインするときに大事な色。サイトの目的やイメージなど、色を決める要素にはいろいろなものがありますが、見やすさ、という大事な要素を忘れてはいけません。では、見やすい色の組み合わせって具体的にはどうやって決めるのでしょうか。参考になるのは「コントラスト比」。アクセシビリティのJIS（JIS X 8341-3:2010）では、少なくとも4.5：1以上のコントラスト比を要求しています。具体的にどのくらいの色がこの達成基準をクリアしているのか調べてみました。

調査のきっかけ

普段からアクセシビリティにかかわっていて、また弱視の視覚障害を持っている私は、以前から「前景色と背景色のコントラスト比と実際の見やすさにはギャップがあるよな」と感覚的には感じていました。きっかけはFlash Playerのアップデートを促すダイアログの前景色と背景色がとっても見づらいことでした。

このギャップを感じて以降、「あれ、これ見づらいな」と思ったものについてコントラスト比を調べてみるというのが癖になっていました。そして今回、じゃあウェブセーフカラーはどうなんだろう、ということで調べはじめたわけです。

やってみたこと

背景色を白（#ffffff）に固定して、文字色を#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でそれぞれ調べました。

背景色が白のときに前景色として使えるwebセーフカラーは78色

調査の結果、背景色が白のときに前景色として使えるwebセーフカラーは78色であることがわかりました。以下に78色のカラーコードとコントラスト比の一覧を示します。
この一覧を活用して、サイトデザインにおける色選びの際の目安の一つにしてください。

なお、視覚特性ごとの見やすさやウェブセーフカラー216色すべての調査結果など詳細についてはCocktailzのウェブサイトをご覧ください。

背景色が白のときに前景色として使える色78色のまとめ
→ http://cocktailz.jp/column/viewpoint/78colors.html

#0033ff 7.2:1

文字色	サンプル	コントラスト比
#000000	サンプル	21.0:1
#000033	サンプル	20.0:1
#000066	サンプル	17.6:1
#000099	サンプル	14.4:1
#0000cc	サンプル	11.2:1
#0000ff	サンプル	8.6:1
#003300	サンプル	14.3:1
#003333	サンプル	13.8:1
#003366	サンプル	12.6:1
#003399	サンプル	10.9:1
#0033cc	サンプル	9.0:1
#006600	サンプル	7.2:1
#006633	サンプル	7.1:1
#006666	サンプル	6.8:1
#006699	サンプル	6.2:1
#0066cc	サンプル	5.6:1
#0066ff	サンプル	4.8:1
#330000	サンプル	18.4:1
#330033	サンプル	17.7:1
#330066	サンプル	15.8:1
#330099	サンプル	13.1:1
#3300cc	サンプル	10.4:1
#3300ff	サンプル	8.1:1
#333300	サンプル	13.0:1
#333333	サンプル	12.6:1
#333366	サンプル	11.6:1
#333399	サンプル	10.1:1
#3333cc	サンプル	8.4:1
#3333ff	サンプル	6.9:1
#336600	サンプル	6.9:1
#336633	サンプル	6.8:1
#336666	サンプル	6.5:1
#336699	サンプル	6.0:1
#3366cc	サンプル	5.4:1
#3366ff	サンプル	4.7:1
#660000	サンプル	13.4:1
#660033	サンプル	13.0:1
#660066	サンプル	12.0:1
#660099	サンプル	10.4:1
#6600cc	サンプル	8.6:1
#6600ff	サンプル	7.0:1
#663300	サンプル	10.3:1
#663333	サンプル	10.1:1
#663366	サンプル	9.4:1
#663399	サンプル	8.4:1
#6633cc	サンプル	7.2:1
#6633ff	サンプル	6.0:1
#666600	サンプル	6.1:1
#666633	サンプル	6.0:1
#666666	サンプル	5.7:1
#666699	サンプル	5.3:1
#6666cc	サンプル	4.8:1
#990000	サンプル	8.9:1
#990033	サンプル	8.7:1
#990066	サンプル	8.2:1
#990099	サンプル	7.5:1
#9900cc	サンプル	6.5:1
#9900ff	サンプル	5.5:1
#993300	サンプル	7.4:1
#993333	サンプル	7.3:1
#993366	サンプル	7.0:1
#993399	サンプル	6.4:1
#9933cc	サンプル	5.7:1
#9933ff	サンプル	4.9:1
#996600	サンプル	4.9:1
#996633	サンプル	4.9:1
#996666	サンプル	4.7:1
#996699	サンプル	4.5:1
#cc0000	サンプル	5.9:1
#cc0033	サンプル	5.8:1
#cc0066	サンプル	5.6:1
#cc0099	サンプル	5.2:1
#cc00cc	サンプル	4.7:1
#cc3300	サンプル	5.2:1
#cc3333	サンプル	5.1:1
#cc3366	サンプル	5.0:1
#cc3399	サンプル	4.7:1