文字色が黒のときに背景色として使える色141色のまとめ

アクセシビリティを考慮して色を決めるときの材料にどうぞ。
※この記事は読者によって投稿されたユーザー投稿です:
  • 編集部の見解や意向と異なる内容の場合があります
  • 編集部は内容について正確性を保証できません
  • 画像が表示されない場合、編集部では対応できません
  • 内容の追加・修正も編集部では対応できません
この記事はユーザー記事として投稿されたものですが、優れた内容ですので通常記事に格上げされました。

ウェブサイトのデザインにおいて大事な役割を果たす色。サイトを通じて企業や商品のイメージを伝えることももちろん大事ですが、見やすさを考慮することも忘れてはいけません。そこで、文字色が黒の時に、アクセシビリティの視点で背景色として使えるWebセーフカラーがどのくらいあるのか調べてみました。

やってみたこと

文字色を黒(#000000)に固定して、背景色を#000000から#ffffffまで変えていった場合のコントラスト比と、白内障、第1色覚(赤)、第2色覚(緑)、第3色覚(青)の4つの視覚特性における見やすさ、そして私の主観的な見やすさについて調べています。

コントラスト比は「カラーコントラストアナライザー」というソフトでチェックし、ウェブコンテンツのアクセシビリティに関するJISである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以上の色は141色

調査の結果、文字色が黒の時に背景色として使えるWebセーフカラーは141色であることがわかりました。全体の約3分の2の色がアクセシビリティの視点から使えるというのは私にとって意外でした。

以下に、コントラスト比4.5:1以上の色をリストアップします。結果の詳細はCocktailzのコラムページをご参照ください。

実際に色を指定したサンプル、JIS X 8341-3:2010への適合、視覚特性ごとの見やすさ、弱視である私の主観などを表にまとめています。

コントラスト比4.5:1以上の色141色(文字色:黒(#000000))

カッコ内は文字色(黒)とのコントラスト比。

背景色表示サンプルコントラスト
#009900サンプル5.6:1
#009933サンプル5.6:1
#009966サンプル5.7:1
#009999サンプル6.0:1
#0099ccサンプル6.4:1
#0099ffサンプル7.0:1
#00cc00サンプル9.6:1
#00cc33サンプル9.7:1
#00cc66サンプル9.8:1
#00cc99サンプル10.1:1
#00ccccサンプル10.5:1
#00ccffサンプル11.1:1
#00ff00サンプル15.3:1
#00ff33サンプル15.4:1
#00ff66サンプル15.5:1
#00ff99サンプル15.8:1
#00ffccサンプル16.2:1
#00ffffサンプル16.7:1
#3366ffサンプル4.5:1
#339900サンプル5.7:1
#339933サンプル5.7:1
#339966サンプル5.9:1
#339999サンプル6.2:1
#3399ccサンプル6.6:1
#3399ffサンプル7.1:1
#33cc00サンプル9.8:1
#33cc33サンプル9.8:1
#33cc66サンプル10.0:1
#33cc99サンプル10.2:1
#33ccccサンプル10.6:1
#33ccffサンプル11.2:1
#33ff00サンプル15.4:1
#33ff33サンプル15.5:1
#33ff66サンプル15.6:1
#33ff99サンプル15.9:1
#33ffccサンプル16.3:1
#33ffffサンプル16.9:1
#6666ffサンプル4.9:1
#669900サンプル6.1:1
#669933サンプル6.2:1
#669966サンプル6.3:1
#669999サンプル6.6:1
#6699ccサンプル7.0:1
#6699ffサンプル7.6:1
#66cc00サンプル10.2:1
#66cc33サンプル10.2:1
#66cc66サンプル10.4:1
#66cc99サンプル10.7:1
#66ccccサンプル11.1:1
#66ccffサンプル11.1:1
#66ff00サンプル15.9:1
#66ff33サンプル15.9:1
#66ff66サンプル16.1:1
#66ff99サンプル16.3:1
#66ffccサンプル16.7:1
#66ffffサンプル17.3:1
#996699サンプル4.7:1
#9966ccサンプル5.1:1
#9966ffサンプル5.7:1
#999900サンプル6.9:1
#999933サンプル7.0:1
#999966サンプル7.1:1
#999999サンプル7.4:1
#9999ccサンプル7.8:1
#9999ffサンプル8.4:1
#99cc00サンプル11.0:1
#99cc33サンプル11.0:1
#99cc66サンプル11.2:1
#99cc99サンプル11.5:1
#99ccccサンプル11.9:1
#99ccffサンプル12.4:1
#99ff00サンプル16.7:1
#99ff33サンプル16.7:1
#99ff66サンプル16.9:1
#99ff99サンプル17.1:1
#99ffccサンプル17.5:1
#99ffffサンプル18.1:1
#cc00ffサンプル5.0:1
#cc3399サンプル4.5:1
#cc33ccサンプル4.9:1
#cc33ffサンプル5.5:1
#cc6600サンプル5.5:1
#cc6633サンプル5.5:1
#cc6666サンプル5.7:1
#cc6699サンプル5.9:1
#cc66ccサンプル6.3:1
#cc66ffサンプル6.9:1
#cc9900サンプル8.1:1
#cc9933サンプル8.2:1
#cc9966サンプル8.3:1
#cc9999サンプル8.6:1
#cc99ccサンプル9.0:1
#cc99ffサンプル9.6:1
#cccc00サンプル12.2:1
#cccc33サンプル12.3:1
#cccc66サンプル12.4:1
#cccc99サンプル12.7:1
#ccccccサンプル13.1:1
#ccccffサンプル13.6:1
#ccff00サンプル17.9:1
#ccff33サンプル17.9:1
#ccff66サンプル18.1:1
#ccff99サンプル18.3:1
#ccffccサンプル18.7:1
#ccffffサンプル19.3:1
#ff0000サンプル5.3:1
#ff0033サンプル5.3:1
#ff0066サンプル5.4:1
#ff0099サンプル5.7:1
#ff00ccサンプル6.1:1
#ff00ffサンプル6.7:1
#ff3300サンプル5.7:1
#ff3333サンプル5.8:1
#ff3366サンプル5.9:1
#ff3399サンプル6.2:1
#ff33ccサンプル6.6:1
#ff33ffサンプル7.2:1
#ff6600サンプル7.2:1
#ff6633サンプル7.2:1
#ff6666サンプル7.3:1
#ff6699サンプル7.6:1
#ff66ccサンプル8.0:1
#ff66ffサンプル8.6:1
#ff9900サンプル9.8:1
#ff9933サンプル9.9:1
#ff9966サンプル10.0:1
#ff9999サンプル10.3:1
#ff99ccサンプル10.7:1
#ff99ffサンプル11.3:1
#ffcc00サンプル13.9:1
#ffcc33サンプル13.9:1
#ffcc66サンプル14.1:1
#ffcc99サンプル14.3:1
#ffccccサンプル14.8:1
#ffccffサンプル15.3:1
#ffff00サンプル19.6:1
#ffff33サンプル19.6:1
#ffff66サンプル19.7:1
#ffff99サンプル20.0:1
#ffffccサンプル20.4:1
#ffffffサンプル21.0:1
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

EC
「EC」は、Electronic Commerce(電子商取引)の略。Eコマース ...→用語集へ

インフォメーション

RSSフィード


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