前回、前々回のコラムで、文字色が黒のときと#333のときにアクセシビリティの視点から背景色として使えるWebセーフカラーについて紹介しました。
今回は#333と並んで、ウェブサイトにおいて文字色として使用されることの多い#666について、文字色が#666の時、アクセシビリティの視点から背景色として使えるWebセーフカラーについて調べることにしました。
やってみたこと
文字色を #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でそれぞれ調べました。
コントラスト比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色を紹介します。
216色のWebセーフカラーすべてに対する調査結果をご覧になりたい場合は、以下のPDFファイルまたはExcelファイルをご覧ください。
背景色と文字色のコントラスト比及び視覚特性ごとのみやすさについて(PDF:273KB)なお、私の主観における記号の意味は以下の通りです。
- ○：読みやすい
- △：読めるが読みづらい
- ×：読めない
| 背景色 | サンプル | コントラスト比 | 7.1.4.3への適合 | 7.1.4.6への適合 | 視覚特性 | 私の主観 | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 通常 | 大きな文字 | 通常 | 大きな文字 | 白内障 | 第1(赤) | 第2(緑) | 第3(青) | ||||
| #0ff | サンプル | 4.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #3fc | サンプル | 4.5:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #3ff | サンプル | 4.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #6f9 | サンプル | 4.5:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #6fc | サンプル | 4.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #6ff | サンプル | 4.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9f0 | サンプル | 4.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9f3 | サンプル | 4.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9f6 | サンプル | 4.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9f9 | サンプル | 4.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9fc | サンプル | 4.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9ff | サンプル | 4.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #cf0 | サンプル | 4.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #cf3 | サンプル | 4.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #cf6 | サンプル | 4.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #cf9 | サンプル | 5.0:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #cfc | サンプル | 5.1:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #cff | サンプル | 5.3:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #ff0 | サンプル | 5.3:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #ff3 | サンプル | 5.4:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #ff6 | サンプル | 5.4:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #ff9 | サンプル | 5.5:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #ffc | サンプル | 5.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #fff | サンプル | 5.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |