※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。
また、編集部はこの内容について正確性を保証できません。
この記事はユーザー記事として投稿されたものですが、優れた内容ですので通常記事に格上げされました。
1か月前に書いたコラムで、文字色が黒のときにアクセシビリティの視点から背景色として使えるWebセーフカラーについて紹介しました。
- 文字色が黒のときに背景色として使える色141色のまとめ（Web担当者Forum） http://web-tan.forum.impressrd.jp/u/2012/04/03/12500
実際にウェブ制作で使われるのは#000ではなく#333や#666なので、こちらについても調べてほしい」というコメントもいただきました。 先天性の弱視である私自身、以前からウェブを使っている中で「
この文字色はいわゆる真っ黒じゃなくて濃いグレーなんだな。なんでこういう色を使ってるんだろう。読みにくいなあ」と感じていました。そこで文字色が#333の時、アクセシビリティの視点から背景色として使えるWebセーフカラーについて調べることにしました。
やってみたこと
文字色を #333333 に固定して、背景色を#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でそれぞれ調べました。- カラーコントラストアナライザー http://www.infoaxia.com/tools/cca/index.html
- Fujitsu ColorSelector http://jp.fujitsu.com/about/design/ud/assistance/colorselector/
コントラスト比4.5:1以上の色は90色
調査の結果、文字色が#333の時に背景色として使える（コントラスト比が4.5：1以上）Webセーフカラーは90色であることがわかりました。前回の結果と比べると、51色も使える色が減っています。また、私の主観として「この組み合わせは見やすい」とはっきり言える色は1つもありませんでした。「読めるが読みづらい」を表す△もたった15色、残りの75色は文字を判読できませんでした。 実際のカラーサンプル、コントラスト比、JIS X 8341-3:2010への適合状況、視覚特性ごとの見やすさなど、調査結果の詳細は私のウェブサイトで公開しています。- 文字色が#333のときに背景色として使える色90色のまとめ http://cocktailz.jp/column/viewpoint/90colors.html
| 背景色 | 表示サンプル | コントラスト |
|---|---|---|
| #00cc00 | サンプル | 5.8:1 |
| #00cc33 | サンプル | 5.8:1 |
| #00cc66 | サンプル | 5.9:1 |
| #00cc99 | サンプル | 6.1:1 |
| #00cccc | サンプル | 6.3:1 |
| #00ccff | サンプル | 6.7:1 |
| #00ff00 | サンプル | 9.2:1 |
| #00ff33 | サンプル | 9.2:1 |
| #00ff66 | サンプル | 9.3:1 |
| #00ff99 | サンプル | 9.5:1 |
| #00ffcc | サンプル | 9.7:1 |
| #00ffff | サンプル | 10.1:1 |
| #33cc00 | サンプル | 5.9:1 |
| #33cc33 | サンプル | 5.9:1 |
| #33cc66 | サンプル | 6.0:1 |
| #33cc99 | サンプル | 6.2:1 |
| #33cccc | サンプル | 6.4:1 |
| #33ccff | サンプル | 6.8:1 |
| #33ff00 | サンプル | 9.3:1 |
| #33ff33 | サンプル | 9.3:1 |
| #33ff66 | サンプル | 9.4:1 |
| #33ff99 | サンプル | 9.6:1 |
| #33ffcc | サンプル | 9.8:1 |
| #33ffff | サンプル | 10.2:1 |
| #6699ff | サンプル | 4.6:1 |
| #66cc00 | サンプル | 6.1:1 |
| #66cc33 | サンプル | 6.2:1 |
| #66cc66 | サンプル | 6.3:1 |
| #66cc99 | サンプル | 6.4:1 |
| #66cccc | サンプル | 6.7:1 |
| #66ccff | サンプル | 7.0:1 |
| #66ff00 | サンプル | 9.5:1 |
| #66ff33 | サンプル | 9.6:1 |
| #66ff66 | サンプル | 9.7:1 |
| #66ff99 | サンプル | 9.8:1 |
| #66ffcc | サンプル | 10.1:1 |
| #66ffff | サンプル | 10.4:1 |
| #9999cc | サンプル | 4.7:1 |
| #9999ff | サンプル | 5.0:1 |
| #99cc00 | サンプル | 6.6:1 |
| #99cc33 | サンプル | 6.6:1 |
| #99cc66 | サンプル | 6.7:1 |
| #99cc99 | サンプル | 6.9:1 |
| #99cccc | サンプル | 7.1:1 |
| #99ccff | サンプル | 7.5:1 |
| #99ff00 | サンプル | 10.0:1 |
| #99ff33 | サンプル | 10.1:1 |
| #99ff66 | サンプル | 10.1:1 |
| #99ff99 | サンプル | 10.3:1 |
| #99ffcc | サンプル | 10.5:1 |
| #99ffff | サンプル | 10.9:1 |
| #cc9900 | サンプル | 4.9:1 |
| #cc9933 | サンプル | 4.9:1 |
| #cc9966 | サンプル | 5.0:1 |
| #cc9999 | サンプル | 5.2:1 |
| #cc99cc | サンプル | 5.4:1 |
| #cc99ff | サンプル | 5.8:1 |
| #cccc00 | サンプル | 7.3:1 |
| #cccc33 | サンプル | 7.4:1 |
| #cccc66 | サンプル | 7.5:1 |
| #cccc99 | サンプル | 7.6:1 |
| #cccccc | サンプル | 7.9:1 |
| #ccccff | サンプル | 8.2:1 |
| #ccff00 | サンプル | 10.8:1 |
| #ccff33 | サンプル | 10.8:1 |
| #ccff66 | サンプル | 10.9:1 |
| #ccff99 | サンプル | 11.0:1 |
| #ccffcc | サンプル | 11.3:1 |
| #ccffff | サンプル | 11.6:1 |
| #ff6699 | サンプル | 4.6:1 |
| #ff66cc | サンプル | 4.8:1 |
| #ff66ff | サンプル | 5.2:1 |
| #ff9900 | サンプル | 5.9:1 |
| #ff9933 | サンプル | 5.9:1 |
| #ff9966 | サンプル | 6.0:1 |
| #ff9999 | サンプル | 6.2:1 |
| #ff99cc | サンプル | 6.4:1 |
| #ff99ff | サンプル | 6.8:1 |
| #ffcc00 | サンプル | 8.4:1 |
| #ffcc33 | サンプル | 8.4:1 |
| #ffcc66 | サンプル | 8.5:1 |
| #ffcc99 | サンプル | 8.6:1 |
| #ffcccc | サンプル | 8.9:1 |
| #ffccff | サンプル | 9.2:1 |
| #ffff00 | サンプル | 11.8:1 |
| #ffff33 | サンプル | 11.8:1 |
| #ffff66 | サンプル | 11.9:1 |
| #ffff99 | サンプル | 12.0:1 |
| #ffffcc | サンプル | 12.3:1 |
| #ffffff | サンプル | 12.6:1 |
- 文字色が#333のときに背景色として使える色90色のまとめ http://cocktailz.jp/column/viewpoint/90colors.html
筆者の人気記事
