※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。
また、編集部はこの内容について正確性を保証できません。
この記事はユーザー記事として投稿されたものですが、優れた内容ですので通常記事に格上げされました。
ウェブサイトのデザインにおいて大事な役割を果たす色。サイトを通じて企業や商品のイメージを伝えることももちろん大事ですが、見やすさを考慮することも忘れてはいけません。そこで、文字色が黒の時に、アクセシビリティの視点で背景色として使えるWebセーフカラーがどのくらいあるのか調べてみました。
やってみたこと
文字色を黒（#000000）に固定して、背景色を#000000から#ffffffまで変えていった場合のコントラスト比と、白内障、第1色覚（赤）、第2色覚（緑）、第3色覚（青）の4つの視覚特性における見やすさ、そして私の主観的な見やすさについて調べています。 コントラスト比は「カラーコントラストアナライザー」というソフトでチェックし、ウェブコンテンツのアクセシビリティに関するJISである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以上の色は141色
調査の結果、文字色が黒の時に背景色として使えるWebセーフカラーは141色であることがわかりました。全体の約3分の2の色がアクセシビリティの視点から使えるというのは私にとって意外でした。 以下に、コントラスト比4.5：1以上の色をリストアップします。結果の詳細はCocktailzのコラムページをご参照ください。 実際に色を指定したサンプル、JIS X 8341-3:2010への適合、視覚特性ごとの見やすさ、弱視である私の主観などを表にまとめています。- 文字色が黒のときに背景色として使える色141色のまとめ：Cocktailz
http://cocktailz.jp/column/viewpoint/141colors.html
コントラスト比4.5:1以上の色141色（文字色：黒(#000000)）
カッコ内は文字色（黒）とのコントラスト比。| 背景色 | 表示サンプル | コントラスト |
|---|---|---|
| #009900 | サンプル | 5.6:1 |
| #009933 | サンプル | 5.6:1 |
| #009966 | サンプル | 5.7:1 |
| #009999 | サンプル | 6.0:1 |
| #0099cc | サンプル | 6.4:1 |
| #0099ff | サンプル | 7.0:1 |
| #00cc00 | サンプル | 9.6:1 |
| #00cc33 | サンプル | 9.7:1 |
| #00cc66 | サンプル | 9.8:1 |
| #00cc99 | サンプル | 10.1:1 |
| #00cccc | サンプル | 10.5:1 |
| #00ccff | サンプル | 11.1:1 |
| #00ff00 | サンプル | 15.3:1 |
| #00ff33 | サンプル | 15.4:1 |
| #00ff66 | サンプル | 15.5:1 |
| #00ff99 | サンプル | 15.8:1 |
| #00ffcc | サンプル | 16.2:1 |
| #00ffff | サンプル | 16.7:1 |
| #3366ff | サンプル | 4.5:1 |
| #339900 | サンプル | 5.7:1 |
| #339933 | サンプル | 5.7:1 |
| #339966 | サンプル | 5.9:1 |
| #339999 | サンプル | 6.2:1 |
| #3399cc | サンプル | 6.6:1 |
| #3399ff | サンプル | 7.1:1 |
| #33cc00 | サンプル | 9.8:1 |
| #33cc33 | サンプル | 9.8:1 |
| #33cc66 | サンプル | 10.0:1 |
| #33cc99 | サンプル | 10.2:1 |
| #33cccc | サンプル | 10.6:1 |
| #33ccff | サンプル | 11.2:1 |
| #33ff00 | サンプル | 15.4:1 |
| #33ff33 | サンプル | 15.5:1 |
| #33ff66 | サンプル | 15.6:1 |
| #33ff99 | サンプル | 15.9:1 |
| #33ffcc | サンプル | 16.3:1 |
| #33ffff | サンプル | 16.9:1 |
| #6666ff | サンプル | 4.9:1 |
| #669900 | サンプル | 6.1:1 |
| #669933 | サンプル | 6.2:1 |
| #669966 | サンプル | 6.3:1 |
| #669999 | サンプル | 6.6:1 |
| #6699cc | サンプル | 7.0:1 |
| #6699ff | サンプル | 7.6:1 |
| #66cc00 | サンプル | 10.2:1 |
| #66cc33 | サンプル | 10.2:1 |
| #66cc66 | サンプル | 10.4:1 |
| #66cc99 | サンプル | 10.7:1 |
| #66cccc | サンプル | 11.1:1 |
| #66ccff | サンプル | 11.1:1 |
| #66ff00 | サンプル | 15.9:1 |
| #66ff33 | サンプル | 15.9:1 |
| #66ff66 | サンプル | 16.1:1 |
| #66ff99 | サンプル | 16.3:1 |
| #66ffcc | サンプル | 16.7:1 |
| #66ffff | サンプル | 17.3:1 |
| #996699 | サンプル | 4.7:1 |
| #9966cc | サンプル | 5.1:1 |
| #9966ff | サンプル | 5.7:1 |
| #999900 | サンプル | 6.9:1 |
| #999933 | サンプル | 7.0:1 |
| #999966 | サンプル | 7.1:1 |
| #999999 | サンプル | 7.4:1 |
| #9999cc | サンプル | 7.8:1 |
| #9999ff | サンプル | 8.4:1 |
| #99cc00 | サンプル | 11.0:1 |
| #99cc33 | サンプル | 11.0:1 |
| #99cc66 | サンプル | 11.2:1 |
| #99cc99 | サンプル | 11.5:1 |
| #99cccc | サンプル | 11.9:1 |
| #99ccff | サンプル | 12.4:1 |
| #99ff00 | サンプル | 16.7:1 |
| #99ff33 | サンプル | 16.7:1 |
| #99ff66 | サンプル | 16.9:1 |
| #99ff99 | サンプル | 17.1:1 |
| #99ffcc | サンプル | 17.5:1 |
| #99ffff | サンプル | 18.1:1 |
| #cc00ff | サンプル | 5.0:1 |
| #cc3399 | サンプル | 4.5:1 |
| #cc33cc | サンプル | 4.9:1 |
| #cc33ff | サンプル | 5.5:1 |
| #cc6600 | サンプル | 5.5:1 |
| #cc6633 | サンプル | 5.5:1 |
| #cc6666 | サンプル | 5.7:1 |
| #cc6699 | サンプル | 5.9:1 |
| #cc66cc | サンプル | 6.3:1 |
| #cc66ff | サンプル | 6.9:1 |
| #cc9900 | サンプル | 8.1:1 |
| #cc9933 | サンプル | 8.2:1 |
| #cc9966 | サンプル | 8.3:1 |
| #cc9999 | サンプル | 8.6:1 |
| #cc99cc | サンプル | 9.0:1 |
| #cc99ff | サンプル | 9.6:1 |
| #cccc00 | サンプル | 12.2:1 |
| #cccc33 | サンプル | 12.3:1 |
| #cccc66 | サンプル | 12.4:1 |
| #cccc99 | サンプル | 12.7:1 |
| #cccccc | サンプル | 13.1:1 |
| #ccccff | サンプル | 13.6:1 |
| #ccff00 | サンプル | 17.9:1 |
| #ccff33 | サンプル | 17.9:1 |
| #ccff66 | サンプル | 18.1:1 |
| #ccff99 | サンプル | 18.3:1 |
| #ccffcc | サンプル | 18.7:1 |
| #ccffff | サンプル | 19.3:1 |
| #ff0000 | サンプル | 5.3:1 |
| #ff0033 | サンプル | 5.3:1 |
| #ff0066 | サンプル | 5.4:1 |
| #ff0099 | サンプル | 5.7:1 |
| #ff00cc | サンプル | 6.1:1 |
| #ff00ff | サンプル | 6.7:1 |
| #ff3300 | サンプル | 5.7:1 |
| #ff3333 | サンプル | 5.8:1 |
| #ff3366 | サンプル | 5.9:1 |
| #ff3399 | サンプル | 6.2:1 |
| #ff33cc | サンプル | 6.6:1 |
| #ff33ff | サンプル | 7.2:1 |
| #ff6600 | サンプル | 7.2:1 |
| #ff6633 | サンプル | 7.2:1 |
| #ff6666 | サンプル | 7.3:1 |
| #ff6699 | サンプル | 7.6:1 |
| #ff66cc | サンプル | 8.0:1 |
| #ff66ff | サンプル | 8.6:1 |
| #ff9900 | サンプル | 9.8:1 |
| #ff9933 | サンプル | 9.9:1 |
| #ff9966 | サンプル | 10.0:1 |
| #ff9999 | サンプル | 10.3:1 |
| #ff99cc | サンプル | 10.7:1 |
| #ff99ff | サンプル | 11.3:1 |
| #ffcc00 | サンプル | 13.9:1 |
| #ffcc33 | サンプル | 13.9:1 |
| #ffcc66 | サンプル | 14.1:1 |
| #ffcc99 | サンプル | 14.3:1 |
| #ffcccc | サンプル | 14.8:1 |
| #ffccff | サンプル | 15.3:1 |
| #ffff00 | サンプル | 19.6:1 |
| #ffff33 | サンプル | 19.6:1 |
| #ffff66 | サンプル | 19.7:1 |
| #ffff99 | サンプル | 20.0:1 |
| #ffffcc | サンプル | 20.4:1 |
| #ffffff | サンプル | 21.0:1 |
関連記事
背景色が白のときに、アクセシビリティ視点から前景色として使える色78色のまとめ
2011年10月13日 0:26
流入元別コンバージョン指標 2011年8月
2011年10月18日 11:00
根拠の乏しい怪しい％データをひと目で見抜く方法とは？ [アクセス解析tips]
2010年3月4日 10:00
「リピーターを増やすWebサイト構築のポイント」Web担セミナー 6/17開催!
2009年4月13日 19:29
「Amazon」よりも速いECサイトが続々と登場、その理由は？【EC売上トップ200サイトの表示スピードランキング・2020年最新版】
2020年5月8日 8:00
ワイドディスプレイの普及でWebの文字が大きくなる？
2009年5月19日 11:00
筆者の人気記事
