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

文字色を#333にしたとき、アクセシビリティの視点から背景色として使える色について調べてみました
※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。
この記事はユーザー記事として投稿されたものですが、優れた内容ですので通常記事に格上げされました。

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

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

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

実際のカラーサンプル、コントラスト比、JIS X 8341-3:2010への適合状況、視覚特性ごとの見やすさなど、調査結果の詳細は私のウェブサイトで公開しています。

以下に、調査の結果背景色として使える、コントラスト比4.5:1以上の色90色をリストアップします。後ろの数値は文字色#333とのコントラスト比です。

背景色表示サンプルコントラスト
#00cc00サンプル5.8:1
#00cc33サンプル5.8:1
#00cc66サンプル5.9:1
#00cc99サンプル6.1:1
#00ccccサンプル6.3:1
#00ccffサンプル6.7:1
#00ff00サンプル9.2:1
#00ff33サンプル9.2:1
#00ff66サンプル9.3:1
#00ff99サンプル9.5:1
#00ffccサンプル9.7:1
#00ffffサンプル10.1:1
#33cc00サンプル5.9:1
#33cc33サンプル5.9:1
#33cc66サンプル6.0:1
#33cc99サンプル6.2:1
#33ccccサンプル6.4:1
#33ccffサンプル6.8:1
#33ff00サンプル9.3:1
#33ff33サンプル9.3:1
#33ff66サンプル9.4:1
#33ff99サンプル9.6:1
#33ffccサンプル9.8:1
#33ffffサンプル10.2:1
#6699ffサンプル4.6:1
#66cc00サンプル6.1:1
#66cc33サンプル6.2:1
#66cc66サンプル6.3:1
#66cc99サンプル6.4:1
#66ccccサンプル6.7:1
#66ccffサンプル7.0:1
#66ff00サンプル9.5:1
#66ff33サンプル9.6:1
#66ff66サンプル9.7:1
#66ff99サンプル9.8:1
#66ffccサンプル10.1:1
#66ffffサンプル10.4:1
#9999ccサンプル4.7:1
#9999ffサンプル5.0:1
#99cc00サンプル6.6:1
#99cc33サンプル6.6:1
#99cc66サンプル6.7:1
#99cc99サンプル6.9:1
#99ccccサンプル7.1:1
#99ccffサンプル7.5:1
#99ff00サンプル10.0:1
#99ff33サンプル10.1:1
#99ff66サンプル10.1:1
#99ff99サンプル10.3:1
#99ffccサンプル10.5:1
#99ffffサンプル10.9:1
#cc9900サンプル4.9:1
#cc9933サンプル4.9:1
#cc9966サンプル5.0:1
#cc9999サンプル5.2:1
#cc99ccサンプル5.4:1
#cc99ffサンプル5.8:1
#cccc00サンプル7.3:1
#cccc33サンプル7.4:1
#cccc66サンプル7.5:1
#cccc99サンプル7.6:1
#ccccccサンプル7.9:1
#ccccffサンプル8.2:1
#ccff00サンプル10.8:1
#ccff33サンプル10.8:1
#ccff66サンプル10.9:1
#ccff99サンプル11.0:1
#ccffccサンプル11.3:1
#ccffffサンプル11.6:1
#ff6699サンプル4.6:1
#ff66ccサンプル4.8:1
#ff66ffサンプル5.2:1
#ff9900サンプル5.9:1
#ff9933サンプル5.9:1
#ff9966サンプル6.0:1
#ff9999サンプル6.2:1
#ff99ccサンプル6.4:1
#ff99ffサンプル6.8:1
#ffcc00サンプル8.4:1
#ffcc33サンプル8.4:1
#ffcc66サンプル8.5:1
#ffcc99サンプル8.6:1
#ffccccサンプル8.9:1
#ffccffサンプル9.2:1
#ffff00サンプル11.8:1
#ffff33サンプル11.8:1
#ffff66サンプル11.9:1
#ffff99サンプル12.0:1
#ffffccサンプル12.3:1
#ffffffサンプル12.6:1

実際のカラーサンプル、コントラスト比、JIS X 8341-3:2010への適合状況、視覚特性ごとの見やすさなど、調査結果の詳細は私のウェブサイトで公開しています。

この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

今日の用語

SEO
検索エンジンからサイトに訪れる人を増やすことで、Webサイトの成果を向上させる施 ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]