1か月前に書いたコラムで、文字色が黒のときにアクセシビリティの視点から背景色として使えるWebセーフカラーについて紹介しました。
この記事にはたくさんの反響がありました。その中には「実際にウェブ制作で使われるのは#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でそれぞれ調べました。
コントラスト比4.5:1以上の色は90色
調査の結果、文字色が#333の時に背景色として使える（コントラスト比が4.5：1以上）Webセーフカラーは90色であることがわかりました。前回の結果と比べると、51色も使える色が減っています。また、以下の表を見ていただくとわかるとおり、私の主観として「この組み合わせは見やすい」とはっきり言える色は1つもありませんでした。「読めるが読みづらい」を表す△もたった15色、残りの75色は文字を判読できませんでした。
以下の表では、調査の結果コントラスト比が4.5:1以上となった90色を紹介します。
216色のWebセーフカラーすべてに対する調査結果をご覧になりたい場合は、以下のPDFファイルまたはExcelファイルをご覧ください。
背景色と文字色のコントラスト比及び視覚特性ごとのみやすさについて(PDF:273KB)なお、私の主観における記号の意味は以下の通りです。
- ○：読みやすい
- △：読めるが読みづらい
- ×：読めない
| 背景色 | サンプル | コントラスト比 | 7.1.4.3への適合 | 7.1.4.6への適合 | 視覚特性 | 私の主観 | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 通常 | 大きな文字 | 通常 | 大きな文字 | 白内障 | 第1(赤) | 第2(緑) | 第3(青) | ||||
| #0c0 | サンプル | 5.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #0c3 | サンプル | 5.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #0c6 | サンプル | 5.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #0c9 | サンプル | 6.1:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #0cc | サンプル | 6.3:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #0cf | サンプル | 6.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #0f0 | サンプル | 9.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #0f3 | サンプル | 9.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #0f6 | サンプル | 9.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #0f9 | サンプル | 9.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #0fc | サンプル | 9.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #0ff | サンプル | 10.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #3c0 | サンプル | 5.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #3c3 | サンプル | 5.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #3c6 | サンプル | 6.0:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #3c9 | サンプル | 6.2:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #3cc | サンプル | 6.4:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #3cf | サンプル | 6.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #3f0 | サンプル | 9.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #3f3 | サンプル | 9.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #3f6 | サンプル | 9.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #3f9 | サンプル | 9.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #3fc | サンプル | 9.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #3ff | サンプル | 10.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #69f | サンプル | 4.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #6c0 | サンプル | 6.1:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #6c3 | サンプル | 6.2:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #6c6 | サンプル | 6.3:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #6c9 | サンプル | 6.4:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #6cc | サンプル | 6.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #6cf | サンプル | 7.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #6f0 | サンプル | 9.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #6f3 | サンプル | 9.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #6f6 | サンプル | 9.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6f9 | サンプル | 9.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6fc | サンプル | 10.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6ff | サンプル | 10.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #99c | サンプル | 4.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #99f | サンプル | 5.0:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9c0 | サンプル | 6.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9c3 | サンプル | 6.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9c6 | サンプル | 6.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9c9 | サンプル | 6.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #9cc | サンプル | 7.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #9cf | サンプル | 7.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #9f0 | サンプル | 10.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #9f3 | サンプル | 10.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #9f6 | サンプル | 10.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #9f9 | サンプル | 10.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #9fc | サンプル | 10.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #9ff | サンプル | 10.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #c90 | サンプル | 4.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c93 | サンプル | 4.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c96 | サンプル | 5.0:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c99 | サンプル | 5.2:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c9c | サンプル | 5.4:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #c9f | サンプル | 5.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #cc0 | サンプル | 7.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #cc3 | サンプル | 7.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #cc6 | サンプル | 7.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #cc9 | サンプル | 7.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #ccc | サンプル | 7.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #ccf | サンプル | 8.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #cf0 | サンプル | 10.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #cf3 | サンプル | 10.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #cf6 | サンプル | 10.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #cf9 | サンプル | 11.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #cfc | サンプル | 11.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #cff | サンプル | 11.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #f69 | サンプル | 4.6:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f6c | サンプル | 4.8:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f6f | サンプル | 5.2:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f90 | サンプル | 5.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f93 | サンプル | 5.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #f96 | サンプル | 6.0:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #f99 | サンプル | 6.2:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #f9c | サンプル | 6.4:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #f9f | サンプル | 6.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | × |
| #fc0 | サンプル | 8.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #fc3 | サンプル | 8.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #fc6 | サンプル | 8.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #fc9 | サンプル | 8.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #fcc | サンプル | 8.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #fcf | サンプル | 9.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #ff0 | サンプル | 11.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #ff3 | サンプル | 11.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #ff6 | サンプル | 11.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | × |
| #ff9 | サンプル | 12.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #ffc | サンプル | 12.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #fff | サンプル | 12.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |