文字色が#333のときに背景色として使える色90色のまとめ

2012.05.07

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

ColorSelector

コントラスト比4.5:1以上の色は90色

調査の結果、文字色が#333の時に背景色として使える(コントラスト比が4.5:1以上)Webセーフカラーは90色であることがわかりました。前回の結果と比べると、51色も使える色が減っています。また、以下の表を見ていただくとわかるとおり、私の主観として「この組み合わせは見やすい」とはっきり言える色は1つもありませんでした。「読めるが読みづらい」を表す△もたった15色、残りの75色は文字を判読できませんでした。

以下の表では、調査の結果コントラスト比が4.5:1以上となった90色を紹介します。

216色のWebセーフカラーすべてに対する調査結果をご覧になりたい場合は、以下のPDFファイルまたはExcelファイルをご覧ください。

なお、私の主観における記号の意味は以下の通りです。

  • ○:読みやすい
  • △:読めるが読みづらい
  • ×:読めない
コントラスト比4.5:1以上の色90色(文字色:#333333)
背景色 サンプル コントラスト比 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

現在位置:ホーム > ブログ > 文字色が#333のときに背景色として使える色90色のまとめ

このページの先頭へ