- 編集部の見解や意向と異なる内容の場合があります
- 編集部は内容について正確性を保証できません
- 画像が表示されない場合、編集部では対応できません
- 内容の追加・修正も編集部では対応できません
ウェブサイトのデザインにおいて大事な役割を果たす色。サイトを通じて企業や商品のイメージを伝えることももちろん大事ですが、見やすさを考慮することも忘れてはいけません。そこで、文字色が黒の時に、アクセシビリティの視点で背景色として使える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 |
必見！ Facebookいいね! 人気記事
最近（過去90日間）の記事で、Facebookの「いいね！」が多かった記事をお見逃し無く。
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
ソーシャルもやってます!