これまで2回のViewpointで、Webセーフカラーのコントラスト比と、さまざまな視覚特性における見やすさ、そして弱視である私の主観的な見やすさを紹介する記事を書きました。
これらの記事を書いた後も調査を続け、216色のWebセーフカラーすべてをチェックしました。その結果、JIS X 8341-3:2010で規定している4.5:1以上のコントラスト比を持つ色の組み合わせは78通りあることがわかりました。今回のコラムではこの結果についてご紹介します。
話の発端を振り返ってみる
過去2回のコラムにも書きましたが、以前から「前景色と背景色のコントラスト比と実際の見やすさにはギャップがあるよな」と感覚的には感じていました。きっかけはFlash Playerのアップデートを促すダイアログの前景色と背景色がとっても見づらいことでした（下図）
このギャップを感じて以降、「あれ、これ見づらいな」と思ったものについてコントラスト比を調べてみるというのが癖になっていました。そして今回、じゃあウェブセーフカラーはどうなんだろう、ということで調べはじめたわけです。
やってみたこと
過去2回のコラムで背景色を白（#ffffff）に固定して、文字色を#000000から#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でそれぞれ調べました。
その後、文字色を#660000から#ffffffまで変えていった場合のコントラスト比と4つの視覚特性における見やすさ、そして私の主観的な見やすさについて調査を行いました。
コントラスト比4.5:1以上の色は78色
以下の表では、調査の結果コントラスト比が4.5:1以上の78色を紹介します。
216色のWebセーフカラーすべてに対する調査結果をご覧になりたい場合は、以下のPDFファイルまたはExcelファイルをご覧ください。
なお、私の主観における記号の意味は以下の通りです。
- ○：読みやすい
- △：読めるが読みづらい
- ×：読めない
| 文字色 | サンプル | コントラスト比 | 7.1.4.3への適合 | 7.1.4.6への適合 | 視覚特性 | 私の主観 | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 通常 | 大きな文字 | 通常 | 大きな文字 | 白内障 | 第1(赤) | 第2(緑) | 第3(青) | ||||
| #000 | サンプル | 21.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | OK |
| #003 | サンプル | 20.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #006 | サンプル | 17.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #009 | サンプル | 14.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #00c | サンプル | 11.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #00f | サンプル | 8.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #030 | サンプル | 14.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #033 | サンプル | 13.8:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #036 | サンプル | 12.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #039 | サンプル | 10.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #03c | サンプル | 9.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #03f | サンプル | 7.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #060 | サンプル | 7.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #063 | サンプル | 7.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #066 | サンプル | 6.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #069 | サンプル | 6.2:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #06c | サンプル | 5.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #06f | サンプル | 4.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #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 | △ |
| #600 | サンプル | 13.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #603 | サンプル | 13.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #606 | サンプル | 12.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #609 | サンプル | 10.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #60c | サンプル | 8.6:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #60f | サンプル | 7.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #630 | サンプル | 10.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #633 | サンプル | 10.1:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #636 | サンプル | 9.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #639 | サンプル | 8.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #63c | サンプル | 7.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #63f | サンプル | 6.0:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #660 | サンプル | 6.1:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #663 | サンプル | 6.0:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #666 | サンプル | 5.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #669 | サンプル | 5.3:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #66c | サンプル | 4.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #900 | サンプル | 8.9:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #903 | サンプル | 8.7:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #906 | サンプル | 8.2:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #909 | サンプル | 7.5:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #90c | サンプル | 6.5:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #90f | サンプル | 5.5:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #930 | サンプル | 7.4:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #933 | サンプル | 7.3:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #936 | サンプル | 7.0:1 | OK | OK | OK | OK | OK | OK | OK | OK | ○ |
| #939 | サンプル | 6.4:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #93c | サンプル | 5.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #93f | サンプル | 4.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #960 | サンプル | 4.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #963 | サンプル | 4.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #966 | サンプル | 4.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #969 | サンプル | 4.5:1 | OK | OK | NG | OK | OK | OK | OK | OK | △ |
| #c00 | サンプル | 5.9:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #c03 | サンプル | 5.8:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #c06 | サンプル | 5.6:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #c09 | サンプル | 5.2:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #c0c | サンプル | 4.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #c30 | サンプル | 5.2:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #c33 | サンプル | 5.1:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #c36 | サンプル | 5.0:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |
| #c39 | サンプル | 4.7:1 | OK | OK | NG | OK | OK | OK | OK | OK | ○ |