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

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

前回、前々回のコラムで、文字色が黒のときと#333のときにアクセシビリティの視点から背景色として使えるWebセーフカラーについて紹介しました。

今回は#333と並んで、ウェブサイトにおいて文字色として使用されることの多い#666について、文字色が#666の時、アクセシビリティの視点から背景色として使えるWebセーフカラーについて調べることにしました。

やってみたこと

文字色を #666666 に固定して、背景色を#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以上の色はたったの24色

調査の結果、文字色が#666の時に背景色として使える(コントラスト比が4.5:1以上)Webセーフカラーはたったの24色しかないことがわかりました。文字色が黒の時に使える色141色、#333の時に使える色90色と比べると、使える色がかなり制限されてしまいます。また、JIS X 8341-3:2010の達成基準7.1.4.6で求めている「7:1以上のコントラスト比(AAA)」を満たす色は1つもありませんでした。文字色を#666にした時点で、達成基準7.1.4.6を満たすことが難しくなるということです。さらに、以下の表を見ていただくとわかるとおり、私の主観として、すべての組み合わせで文字を判読できませんでした。

以下、調査の結果コントラスト比が4.5:1以上となった24色を紹介します。カラーコードのあとの数値は#666とのコントラスト比です。

実際のカラーサンプル、JIS X 8341-3:2010への適合状況、視覚特性ごとの見やすさなどの詳細については、Cocktailzウェブサイトに掲載していますので参考にしてください。

背景色表示サンプルコントラスト
#00ffffサンプル4.6:1
#33ffccサンプル4.5:1
#33ffffサンプル4.6:1
#66ff99サンプル4.5:1
#66ffccサンプル4.6:1
#66ffffサンプル4.7:1
#99ff00サンプル4.6:1
#99ff33サンプル4.6:1
#99ff66サンプル4.6:1
#99ff99サンプル4.7:1
#99ffccサンプル4.8:1
#99ffffサンプル4.9:1
#ccff00サンプル4.9:1
#ccff33サンプル4.9:1
#ccff66サンプル4.9:1
#ccff99サンプル5.0:1
#ccffccサンプル5.1:1
#ccffffサンプル5.3:1
#ffff00サンプル5.3:1
#ffff33サンプル5.4:1
#ffff66サンプル5.4:1
#ffff99サンプル5.5:1
#ffffccサンプル5.6:1
#ffffffサンプル5.7:1

実際のカラーサンプル、JIS X 8341-3:2010への適合状況、視覚特性ごとの見やすさなどの詳細については、Cocktailzウェブサイトに掲載していますので参考にしてください。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

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

今日の用語

フジツボ式SEO
主にローカルSEO(地域限定ビジネス向けのSEO)において、顧客にとって印象的だ ...→用語集へ

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

インフォメーション

RSSフィード


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