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

ウェブサイトをデザインするときに大事な色。サイトの目的やイメージなど、色を決める要素にはいろいろなものがありますが、見やすさ、という大事な要素を忘れてはいけません。では、見やすい色の組み合わせって具体的にはどうやって決めるのでしょうか。参考になるのは「コントラスト比」。アクセシビリティの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