Webセーフカラーとコントラスト比と色覚特性と(2)

2011.08.11

1か月ほど前の記事で、Webセーフカラーのコントラスト比と、さまざまな視覚特性における見やすさ、そして弱視である私の主観的な見やすさを紹介する記事を書きました。

今回はコントラスト比の第2弾。Webセーフカラーのうち#330000から#33ffffまでの36色について調べた結果をご紹介します。

話の発端を振り返ってみる

以前から、「前景色と背景色のコントラスト比と実際の見やすさにはギャップがあるよな」と感覚的には感じていました。きっかけはFlash Playerのアップデートを促すダイアログの前景色と背景色がとっても見づらいことでした（下図）

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でそれぞれ調べました。

ColorSelector

調査してみて感じたこと

第1色覚（赤）には見やすいのか？

結果表を見ると、今回も第1色覚（赤）の列はずっとOKが続きます。最初にNGが出るのは#3f0のときで、コントラスト比は1.4:1。前回と同じ結果です。

コントラスト比と見やすさは難しい

あくまでも個人的な印象ですが、今回はコントラスト比が7：1を切ったあたりで主観的な見やすさが怪しくなってきました。前回は3.8：1。コントラスト比だけを見るとかなりの差がありますが、この差には再現性があるのか、また原因はどこから来るのか。難しいですね。

調査結果

調査の結果を表にまとめます。なお、私の主観における記号の意味は以下の通りです。

  • ○：読みやすい
  • △：読めるが読みづらい
  • ×：読めない
Webセーフカラーのコントラスト比と4つの視覚特性における見やすさ及び私の主観
文字色 サンプル コントラスト比 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 ×

現在位置：ホーム > ブログ > Webセーフカラーとコントラスト比と色覚特性と(2)

このページの先頭へ