Webセーフカラーとコントラスト比と色覚特性と(2)
1か月ほど前のViewpointで、Webセーフカラーのコントラスト比と、さまざまな視覚特性における見やすさ、そして弱視である私の主観的な見やすさを紹介する記事を書きました。
今回はコントラスト比の第2弾。Webセーフカラーのうち#330000から#33ffffまでの36色について調べた結果をご紹介します。
話の発端を振り返ってみる
以前から、「前景色と背景色のコントラスト比と実際の見やすさにはギャップがあるよな」と感覚的には感じていました。きっかけはFlash Playerのアップデートを促すダイアログの前景色と背景色がとっても見づらいことでした（下図）
このギャップを感じて以降、「あれ、これ見づらいな」と思ったものについてコントラスト比を調べてみるというのが癖になっていました。そして今回、じゃあウェブセーフカラーはどうなんだろう、ということで、少し調べてみたわけです。
やってみたこと
今回は、背景色を白（#ffffff）に固定して、文字色を#330000から#33ffffまで変えていった場合のコントラスト比と、白内障、第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でそれぞれ調べました。
調査してみて感じたこと
第1色覚（赤）には見やすいのか？
結果表を見ると、今回も第1色覚（赤）の列はずっとOKが続きます。最初にNGが出るのは#3f0のときで、コントラスト比は1.4:1。前回と同じ結果です。
コントラスト比と見やすさは難しい
あくまでも個人的な印象ですが、今回はコントラスト比が7：1を切ったあたりで主観的な見やすさが怪しくなってきました。前回は3.8：1。コントラスト比だけを見るとかなりの差がありますが、この差には再現性があるのか、また原因はどこから来るのか。難しいですね。
調査結果
調査の結果を表にまとめます。なお、私の主観における記号の意味は以下の通りです。
- ○：読みやすい
- △：読めるが読みづらい
- ×：読めない
| 文字色 | サンプル | コントラスト比 | 7.1.4.3への適合 | 7.1.4.6への適合 | 視覚特性 | 私の主観 | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 通常 | 大きな文字 | 通常 | 大きな文字 | 白内障 | 第1(赤) | 第2(緑) | 第3(青) | ||||
| #300 | サンプル | 18.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #303 | サンプル | 17.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #306 | サンプル | 15.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #309 | サンプル | 13.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #30c | サンプル | 10.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #30f | サンプル | 8.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #330 | サンプル | 13.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #333 | サンプル | 12.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #336 | サンプル | 11.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #339 | サンプル | 10.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #33c | サンプル | 8.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #33f | サンプル | 6.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #360 | サンプル | 6.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #363 | サンプル | 6.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #366 | サンプル | 6.5:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #369 | サンプル | 6.0:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #36c | サンプル | 5.4:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #36f | サンプル | 4.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #390 | サンプル | 3.7:1 | NG | OK | NG | NG | OK | OK | OK | OK | △ |
| #393 | サンプル | 3.7:1 | NG | OK | NG | NG | OK | OK | OK | OK | △ |
| #396 | サンプル | 3.6:1 | NG | OK | NG | NG | OK | OK | OK | OK | △ |
| #399 | サンプル | 3.4:1 | NG | OK | NG | NG | OK | OK | OK | OK | △ |
| #39c | サンプル | 3.2:1 | NG | OK | NG | NG | NG | OK | OK | OK | △ |
| #39f | サンプル | 2.9:1 | NG | NG | NG | NG | NG | OK | OK | OK | △ |
| #3c0 | サンプル | 2.1:1 | NG | NG | NG | NG | NG | OK | NG | NG | × |
| #3c3 | サンプル | 2.1:1 | NG | NG | NG | NG | NG | OK | NG | NG | × |
| #3c6 | サンプル | 2.1:1 | NG | NG | NG | NG | NG | OK | NG | NG | × |
| #3c9 | サンプル | 2.1:1 | NG | NG | NG | NG | NG | OK | NG | NG | × |
| #3cc | サンプル | 2.0:1 | NG | NG | NG | NG | NG | OK | NG | NG | × |
| #3cf | サンプル | 1.9:1 | NG | NG | NG | NG | NG | OK | NG | NG | × |
| #3f0 | サンプル | 1.4:1 | NG | NG | NG | NG | NG | NG | NG | NG | × |
| #3f3 | サンプル | 1.4:1 | NG | NG | NG | NG | NG | NG | NG | NG | × |
| #3f6 | サンプル | 1.3:1 | NG | NG | NG | NG | NG | NG | NG | NG | × |
| #3f9 | サンプル | 1.3:1 | NG | NG | NG | NG | NG | NG | NG | NG | × |
| #3fc | サンプル | 1.3:1 | NG | NG | NG | NG | NG | NG | NG | NG | × |
| #3ff | サンプル | 1.2:1 | NG | NG | NG | NG | NG | NG | NG | NG | × |