※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。
また、編集部はこの内容について正確性を保証できません。
この記事はユーザー記事として投稿されたものですが、優れた内容ですので通常記事に格上げされました。
前回、前々回のコラムで、文字色が黒のときと#333のときにアクセシビリティの視点から背景色として使えるWebセーフカラーについて紹介しました。
- 文字色が#333のときに背景色として使える色90色のまとめ(2012年5月7日) http://web-tan.forum.impressrd.jp/u/2012/05/07/12696
- 文字色が黒のときに背景色として使える色141色のまとめ(2012年4月2日) http://web-tan.forum.impressrd.jp/u/2012/04/03/12500
やってみたこと
文字色を #666666 に固定して、背景色を#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 ColorSeloctor http://jp.fujitsu.com/about/design/ud/assistance/colorselector/
コントラスト比4.5:1以上の色はたったの24色
調査の結果、文字色が#666の時に背景色として使える（コントラスト比が4.5：1以上）Webセーフカラーはたったの24色しかないことがわかりました。文字色が黒の時に使える色141色、#333の時に使える色90色と比べると、使える色がかなり制限されてしまいます。また、JIS X 8341-3:2010の達成基準7.1.4.6で求めている「7：1以上のコントラスト比(AAA)」を満たす色は1つもありませんでした。文字色を#666にした時点で、達成基準7.1.4.6を満たすことが難しくなるということです。さらに、以下の表を見ていただくとわかるとおり、私の主観として、すべての組み合わせで文字を判読できませんでした。 以下、調査の結果コントラスト比が4.5:1以上となった24色を紹介します。カラーコードのあとの数値は#666とのコントラスト比です。 実際のカラーサンプル、JIS X 8341-3:2010への適合状況、視覚特性ごとの見やすさなどの詳細については、Cocktailzウェブサイトに掲載していますので参考にしてください。- 文字色が#666のときに背景色として使える色24色のまとめ：Cocktailz http://cocktailz.jp/column/viewpoint/24colors.html
| 背景色 | 表示サンプル | コントラスト |
|---|---|---|
| #00ffff | サンプル | 4.6:1 |
| #33ffcc | サンプル | 4.5:1 |
| #33ffff | サンプル | 4.6:1 |
| #66ff99 | サンプル | 4.5:1 |
| #66ffcc | サンプル | 4.6:1 |
| #66ffff | サンプル | 4.7:1 |
| #99ff00 | サンプル | 4.6:1 |
| #99ff33 | サンプル | 4.6:1 |
| #99ff66 | サンプル | 4.6:1 |
| #99ff99 | サンプル | 4.7:1 |
| #99ffcc | サンプル | 4.8:1 |
| #99ffff | サンプル | 4.9:1 |
| #ccff00 | サンプル | 4.9:1 |
| #ccff33 | サンプル | 4.9:1 |
| #ccff66 | サンプル | 4.9:1 |
| #ccff99 | サンプル | 5.0:1 |
| #ccffcc | サンプル | 5.1:1 |
| #ccffff | サンプル | 5.3:1 |
| #ffff00 | サンプル | 5.3:1 |
| #ffff33 | サンプル | 5.4:1 |
| #ffff66 | サンプル | 5.4:1 |
| #ffff99 | サンプル | 5.5:1 |
| #ffffcc | サンプル | 5.6:1 |
| #ffffff | サンプル | 5.7:1 |
- 文字色が#666のときに背景色として使える色24色のまとめ：Cocktailz http://cocktailz.jp/column/viewpoint/24colors.html
筆者の人気記事
