※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。
また、編集部はこの内容について正確性を保証できません。
ウェブサイトをデザインするときに大事な色。サイトの目的やイメージなど、色を決める要素にはいろいろなものがありますが、見やすさ、という大事な要素を忘れてはいけません。では、見やすい色の組み合わせって具体的にはどうやって決めるのでしょうか。参考になるのは「コントラスト比」。アクセシビリティの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
| 文字色 | サンプル | コントラスト比 |
|---|---|---|
| #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 |
関連記事
文字色が黒のときに背景色として使える色141色のまとめ
2012年4月3日 0:08
「リピーターを増やすWebサイト構築のポイント」Web担セミナー 6/17開催!
2009年4月13日 19:29
予算・ビジネス目的別 9つのネットマーケ手法 選択チャート（後編）
2009年7月31日 9:00
賢い発注はウェブサイト制作フローの正しい理解から――よくある4つの悩み事
2008年1月17日 9:00
ECサイトで売上を上げる! （後編） 広告に頼らず見込み客リストを作ってリピートしてもらう方法
2010年2月1日 9:00
「Amazon」「楽天市場」「Yahoo!ショッピング」「価格.com」表示スピードNo.1はどこ？ 自社ECとECモール店はどっちが速い？
2020年11月18日 7:00
筆者の人気記事
