昨年10月に書いたコラムで、背景色が白のときにアクセシビリティの視点から文字色として使えるWebセーフカラーについて紹介させていただきました。
そこで浮かんでくるのが「では、文字色が黒の時はどうなんだろう？」という素朴な疑問。そこで今回は、文字色が黒の時にアクセシビリティの視点から背景色として使えるWebセーフカラーについてご紹介します。
やってみたこと
文字色を黒（#000000）に固定して、背景色を#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以上の色は141色
調査の結果、文字色が黒の時に背景色として使えるWebセーフカラーは141色であることがわかりました。全体の約3分の2の色がアクセシビリティの視点から使えるというのは私にとって意外でした。
以下の表では、調査の結果コントラスト比が4.5:1以上となった141色を紹介します。
216色のWebセーフカラーすべてに対する調査結果をご覧になりたい場合は、以下のPDFファイルまたはExcelファイルをご覧ください。
背景色と文字色のコントラスト比及び視覚特性ごとのみやすさについて(PDF:274KB)なお、私の主観における記号の意味は以下の通りです。
- ○：読みやすい
- △：読めるが読みづらい
- ×：読めない
| 背景色 | サンプル | コントラスト比 | 7.1.4.3への適合 | 7.1.4.6への適合 | 視覚特性 | 私の主観 | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 通常 | 大きな文字 | 通常 | 大きな文字 | 白内障 | 第1(赤) | 第2(緑) | 第3(青) | ||||
| #090 | サンプル | 5.6:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #093 | サンプル | 5.6:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #096 | サンプル | 5.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #099 | サンプル | 6.0:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #09c | サンプル | 6.4:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #09f | サンプル | 7.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0c0 | サンプル | 9.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0c3 | サンプル | 9.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0c6 | サンプル | 9.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0c9 | サンプル | 10.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0cc | サンプル | 10.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0cf | サンプル | 11.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #0f0 | サンプル | 15.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0f3 | サンプル | 15.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0f6 | サンプル | 15.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0f9 | サンプル | 15.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0fc | サンプル | 16.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #0ff | サンプル | 16.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #36f | サンプル | 4.5:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #390 | サンプル | 5.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #393 | サンプル | 5.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #396 | サンプル | 5.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #399 | サンプル | 6.2:1 | OK | OK | NG | OK | OK | NG | OK | OK | △ |
| #39c | サンプル | 6.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #39f | サンプル | 7.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #3c0 | サンプル | 9.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #3c3 | サンプル | 9.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #3c6 | サンプル | 10.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #3c9 | サンプル | 10.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #3cc | サンプル | 10.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #3cf | サンプル | 11.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #3f0 | サンプル | 15.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #3f3 | サンプル | 15.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #3f6 | サンプル | 15.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #3f9 | サンプル | 15.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #3fc | サンプル | 16.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #3ff | サンプル | 16.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #66f | サンプル | 4.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #690 | サンプル | 6.1:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #693 | サンプル | 6.2:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #696 | サンプル | 6.3:1 | OK | OK | NG | OK | OK | NG | OK | OK | △ |
| #699 | サンプル | 6.6:1 | OK | OK | NG | OK | OK | NG | OK | OK | △ |
| #69c | サンプル | 7.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #69f | サンプル | 7.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6c0 | サンプル | 10.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6c3 | サンプル | 10.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6c6 | サンプル | 10.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6c9 | サンプル | 10.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6cc | サンプル | 11.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #6cf | サンプル | 11.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #6f0 | サンプル | 15.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6f3 | サンプル | 15.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6f6 | サンプル | 16.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #6f9 | サンプル | 16.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #6fc | サンプル | 16.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #6ff | サンプル | 17.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #969 | サンプル | 4.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #96c | サンプル | 5.1:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #96f | サンプル | 5.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #990 | サンプル | 6.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | △ |
| #993 | サンプル | 7.0:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #996 | サンプル | 7.1:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #999 | サンプル | 7.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #99c | サンプル | 7.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #99f | サンプル | 8.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #9c0 | サンプル | 11.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #9c3 | サンプル | 11.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #9c6 | サンプル | 11.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #9c9 | サンプル | 11.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #9cc | サンプル | 11.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #9cf | サンプル | 12.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #9f0 | サンプル | 16.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #9f3 | サンプル | 16.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #9f6 | サンプル | 16.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #9f9 | サンプル | 17.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #9fc | サンプル | 17.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #9ff | サンプル | 18.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #c0f | サンプル | 5.0:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c39 | サンプル | 4.5:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c3c | サンプル | 4.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c3f | サンプル | 5.5:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c60 | サンプル | 5.5:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c63 | サンプル | 5.5:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c66 | サンプル | 5.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c69 | サンプル | 5.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #c6c | サンプル | 6.3:1 | OK | OK | NG | OK | OK | NG | OK | OK | △ |
| #c6f | サンプル | 6.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | △ |
| #c90 | サンプル | 8.1:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #c93 | サンプル | 8.2:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #c96 | サンプル | 8.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #c99 | サンプル | 8.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #c9c | サンプル | 9.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #c9f | サンプル | 9.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cc0 | サンプル | 12.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cc3 | サンプル | 12.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cc6 | サンプル | 12.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cc9 | サンプル | 12.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #ccc | サンプル | 13.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #ccf | サンプル | 13.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cf0 | サンプル | 17.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cf3 | サンプル | 17.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cf6 | サンプル | 18.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cf9 | サンプル | 18.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cfc | サンプル | 18.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #cff | サンプル | 19.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #f00 | サンプル | 5.3:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f03 | サンプル | 5.3:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f06 | サンプル | 5.4:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f09 | サンプル | 5.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f0c | サンプル | 6.1:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f0f | サンプル | 6.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f30 | サンプル | 5.7:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f33 | サンプル | 5.8:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f36 | サンプル | 5.9:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f39 | サンプル | 6.2:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f3c | サンプル | 6.6:1 | OK | OK | NG | OK | OK | NG | OK | OK | × |
| #f3f | サンプル | 7.2:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #f60 | サンプル | 7.2:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #f63 | サンプル | 7.2:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #f66 | サンプル | 7.3:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #f69 | サンプル | 7.6:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #f6c | サンプル | 8.0:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #f6f | サンプル | 8.6:1 | OK | OK | OK | OK | OK | NG | OK | OK | △ |
| #f90 | サンプル | 9.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #f93 | サンプル | 9.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #f96 | サンプル | 10.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | △ |
| #f99 | サンプル | 10.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #f9c | サンプル | 10.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #f9f | サンプル | 11.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #fc0 | サンプル | 13.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #fc3 | サンプル | 13.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #fc6 | サンプル | 14.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #fc9 | サンプル | 14.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #fcc | サンプル | 14.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #fcf | サンプル | 15.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #ff0 | サンプル | 19.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #ff3 | サンプル | 19.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #ff6 | サンプル | 19.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #ff9 | サンプル | 20.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #ffc | サンプル | 20.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #fff | サンプル | 21.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |