基礎からわかるホームページの配色 http://www.webcolordesign.net 自分でウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイトです。 Tue, 25 Nov 2014 05:58:44 +0000 ja hourly 1 http://wordpress.org/?v=4.0.10 ビジネスブログの色に関する考察 http://www.webcolordesign.net/column/businessblog.html http://www.webcolordesign.net/column/businessblog.html#comments Thu, 26 Aug 2010 03:43:16 +0000 http://www.webcolordesign.com/?p=620 先日、Twitter上でブログの色についてつぶやいてみました。内容はこんな感じです。

  • ブログの色について。検索などからブログにたどり着く場合、ヘッダだけ変えて目立たせた個人の無料ブログって、ものすごく記事に到達しにくい。この人の考えや意見を知りたいという強い意志がない場合には、ヘッダだけ目立ってるのはマイナス
  • 既にリピーターになってる人には関係ない話なんだけども、そもそもリピーターにさせるためには内容の充実が必要なわけで、内容をよく知ってもらうためには、サイトの回遊性を高める色を選ぶことも重要。ヘッダ変えただけでは集客は無理だ
  • と言うわけで、やっぱりコンテンツがよくないとどうにもならんなといういつもの話に落ちついた


とは言うものの、140字では多少言い足りない部分や、誤解を招きそうなところもあるので、もう一度整理してみようと思います。個人のブログで、特にビジネスにつながらなくても、好きなことが発信できればいいという場合には、どんな色でも構わないと思いますので、今回はビジネスブログに限った場合で考えてみましょう。

まずブログが読まれる場合には、大きく「その記事を読みたい」という場合と、「ある人の書いた記事を読みたい」という場合に分けて考えることが出来るかと思います。前者は検索エンジンやTwitter・ソーシャルブックマークなどで記事のタイトルなどを見て興味をひかれた場合、後者はその分野の第一人者や芸能人など誰が記事を書いたのかがその時点でわかっている場合ですね。

記事そのものに興味を持っての訪問の場合には、まず興味の対象は記事の内容です。そこで内容が良ければ、他のページの記事も読んでみたいと思うでしょうし、上手くいけばTwitterでフォローされたり、ブックマークなどもしてもらえるでしょう。このようにリピーターやフォロワーが増えればよいのですが、そのためには内容の充実というのが大前提になります。

リピーターを増やすためには、その時幸運にも読んでもらえた記事だけが見られればよいわけでもないでしょう。出来れば他の記事も読んでもらい、「この人の書いていることはおもしろい」や「なかなか勉強になるなぁ」などと感じてもらえるようにしなければなりません。

ああ、ここまでまったく色のことは書かれていません。そして書きようもありません。当たり前のことですが、1回目の訪問をしてもらうまでは、色なんて読者には関係ありません。つまりブログの色で訪問者数アップというのは、ただのファンタジーなのですね。

ただ訪問してもらってからということであれば、話はまったく別です。

どこからともなくやってきた読者は、そのブロガーの名前や経歴などは知らず、記事のタイトルの情報だけを持ってブログに到着します。そのような人に向けて、まず記事の部分に視線が向くように配色をする必要があります。

そして出来れば他の記事も読んでもらって、このサイトのリピーターになってもらいたいという希望を実現させるためには、サイト内の回遊性を高めるために、リンクなどがわかりやすい色を施す必要があるのです。

アメブロをはじめとする無料のブログサービスのテンプレートの中には、どう考えてもその人の記事よりも、各種サービスが大事なのではないかと思われる（運営側としてはおそらくそう）ものがたくさんありますので、テンプレートをそのまま使うには注意が必要かもしれません。

次に後者の著名人のブログなどでは、そもそもリピーターが多かったり、○○のブログのように内容より誰のブログかということで訪問されたりするので、上記のような配慮はしなくてもよいのかもしれませんが、それでも回遊性を高めるための工夫は必要ですね。

では、ヘッダのデザインなんかはどうでもいいのかというと、けしてそうではありません。サイトのユーザビリティとは別にブランディングとして重要になるわけです。

書いている人や内容をわかりやすいイメージで表現することで、より顧客になってくれそうなターゲットをひきつけてくれます。企業のブログではその企業の理念を表すコーポレートカラーが、個人のブログでは、その人をの人柄や考え方、文体などに合った色を表現することが重要でしょう。

まとめると、ブログに重要なのは内容の充実で、それを支えるための色・デザインが必要です。

逆に一番よろしくないのは、ヘッダなどのデザイン部分だけ派手に作って、内容がまったく充実していない場合ですね。顔出しまでして、内容がしょぼかったという印象が残るのだけは避けたいものです。

そしてせっかく訪問してくれた人がクライアント候補にさせるために、わかりやすいナビゲーションの配色にすることです。

ビジネスブログの色を真剣に考えるなら、コンテンツの充実度合いとデザイン・ユーザビリティを総合的に考えた方がよいでしょう。デザインだけ突出しているのはマイナス効果を生むこともあると考えています。

ビジネスブログの色については、大阪と東京のWebカラーセミナーでも少しお話ししようと思います。

企業サイトや個人事業主の方で、ブログの配色はこれでいいのかというお悩みをお持ちの方は、フォルトゥナでアドバイスも行っておりますので、ご相談ください。関連記事：

]]> http://www.webcolordesign.net/column/businessblog.html/feed 0 ウェブ配色ツール Ver2.0 http://www.webcolordesign.net/others/%e3%82%a6%e3%82%a7%e3%83%96%e9%85%8d%e8%89%b2%e3%83%84%e3%83%bc%e3%83%ab-ver2-0.html http://www.webcolordesign.net/others/%e3%82%a6%e3%82%a7%e3%83%96%e9%85%8d%e8%89%b2%e3%83%84%e3%83%bc%e3%83%ab-ver2-0.html#comments Mon, 16 Aug 2010 01:54:09 +0000 http://www.webcolordesign.com/?p=615 ウェブ配色ツール Ver2.0の画像当サイトで公開しております配色ツールの後継ツールとなる「ウェブ配色ツール Ver2.0」を公開しました。

今回のツールでは背景色の有無やロゴのテキスト・色に加え、メインビジュアルの変更にも対応しております。また配色一覧表も表示できるため、打ち合わせ等でも利用いただけると思います。

フィードバックをいただければ、バージョンアップの参考にさせていただきますので、何か気づいた点などがありましたら、お問い合わせいただければと思います。

「ウェブ配色ツール Ver2.0」は、当サイトではなくカラープランニングオフィス フォルトゥナのサイトに設置しておりますので、お間違えなきようよろしくお願いします。関連記事：

]]> http://www.webcolordesign.net/others/%e3%82%a6%e3%82%a7%e3%83%96%e9%85%8d%e8%89%b2%e3%83%84%e3%83%bc%e3%83%ab-ver2-0.html/feed 0 ウェブサイトにおけるカラーコーディネーター（あるいは色）の役割 http://www.webcolordesign.net/color_point/out_sourcing/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%8d%e3%83%bc%e3%82%bf%e3%83%bc%ef%bc%88.html http://www.webcolordesign.net/color_point/out_sourcing/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%8d%e3%83%bc%e3%82%bf%e3%83%bc%ef%bc%88.html#comments Sat, 24 Jul 2010 14:54:24 +0000 http://www.webcolordesign.com/?p=613 ウェブサイトにおけるカラーコーディネーターの役割は、大きく2つに分かれます。それは企画段階におけるカラーマーケティングです。そしてデザイン時における確認と最終調整です。実はこの2つは同じ色を扱う作業でも、まったく異なる事を行うのです。

まずはカラーマーケティングの部分ですが、サイトの目的を踏まえ、使うべきロゴ（ない場合には提案）の色や競合サイトの調査に基づく使用色の提案です。例えば水を使う企業では当然青系の水をイメージさせる色を使いたいはずですが、競合サイトと似すぎていると、比較された時に見劣りする場合があります。これは単にデザインが見劣りするという意味でなく、後発の企業（特に無名の企業の場合）には、真似されたと感じられることも少なくありません。

だからと言って、水のイメージなのにオレンジをメインで使おうというのもおかしな話です。このバランスを考えながら、どのような色合いにすれば、印象に残りやすいかを考えることも重要です。これを考える際には、実店舗が存在するかどうか、あるとすればその近隣にはどのような競合があるのかも調べなければなりません。

もう一つのデザインの確認と調整は、カラーマーケティングから導き出された配色がきちんとデザインに反映されているかどうかに加え、最終段階で重要なのはユーザビリティとアクセシビリティの確保です。

これは実際にデザイナーが色を付けてみないとわからないことも多いのです。ワイヤフレームだけでは、リンク色や見出しと本文の関係、ナビゲーションの認識しやすさなどはわからないので、情報をいかに伝達するかを考えれば、配色案を決めたらそれで終わりというわけにはいきません。（だが、そのようなカラーコーディネーターも多いです・・・）　また特定の人にとって使いにくいような配色では、操作や閲覧が困難という理由で帰られてしまうかもしれません。色によって、無用な機会損失も生まれてしまうのです。

サイトリニューアルなどでは、情報をスムーズに流れるようにするだけで、1人辺りのページビューは落ちても、問い合わせ率が上がることもあります。これはわかりにくさがなくなり、目的のページへ到達しやすくなったことを表します。色の効果はきれいに見せるだけではないのです。

カラーコーディネーターは、SEOなどのサイトを訪問するまでの手段にはまったく手を出すことも出来ませんし、きちんとしたサイトが構築されていなかったり、商品や情報が魅力的なものでなければ、いかに色でごまかそうとしても消費者には見抜かれてしまうでしょう。

言い換えれば、有益なコンテンツやよい商品が持つ力を、スムーズな形で伝え、そのビジネスに貢献することが、カラーコーディネーターの最重要の課題となります。カラーマーケティングだけ出来ていてもサイトとしては不十分ですし、インターフェースなどの機能面だけが充実していてもサイトの効果は下がってしまいます。

例えるならば、カラーコーディネーターの仕事は、作戦立案における参謀（プロデューサー・ディレクターの補助をしてカラーマーケティング）と実践面における後方支援・整備（色彩実装の確認）のまったく異なる仕事を行う必要があるのです。しかし、いずれにしても、いかにサイトを訪問したユーザーの印象に残し、ストレスを感じさせない色を作り上げるかが腕の見せ所と言えるでしょう。

SEOなどの訪問数を上げる施策はもちろん重要ですが、訪問されてからどのように問い合わせ・購入につなげるかも重要ですし、そこには色が何らかの貢献が出来るはずだと考えています。

と、そんなことを踏まえながら9月28日（火）のウェブカラーセミナーで話そうかと思っています。関連記事：

]]> http://www.webcolordesign.net/color_point/out_sourcing/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%8d%e3%83%bc%e3%82%bf%e3%83%bc%ef%bc%88.html/feed 0 文字の読みやすさに関するまとめ http://www.webcolordesign.net/color_point/usability/research_contrast/%e6%96%87%e5%ad%97%e3%81%ae%e8%aa%ad%e3%81%bf%e3%82%84%e3%81%99%e3%81%95%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e3%81%be%e3%81%a8%e3%82%81.html http://www.webcolordesign.net/color_point/usability/research_contrast/%e6%96%87%e5%ad%97%e3%81%ae%e8%aa%ad%e3%81%bf%e3%82%84%e3%81%99%e3%81%95%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e3%81%be%e3%81%a8%e3%82%81.html#comments Tue, 15 Jun 2010 05:29:26 +0000 http://www.webcolordesign.com/?p=589 文字の読みやすさに関しての調査結果を「アンケートの集計結果1（生データ）」「アンケートの設問について」「アンケートの集計結果に対する感想」の3つのエントリーに書いてきましたが、今回はそれらのまとめとなります。回答の数字だけでなく、いただいたご意見などもまとめて、読みやすさに関してまとめてみました。

  • WCAG2.0のコントラスト比の基準はまず妥当。ただし、高彩度色を使う場合には、よみにくくなる場合もある。
  • 一般的にはコントラスト比が高い方が読みやすいという事実に変わりはない。ただし、同じ2色で文字色と背景色を入れ替えただけでも、読みやすさが変わる。
  • 膨張色の効果が出ているのか、文字色の方が明るい方が読みやすいという傾向がある。ただし、長文ではこの限りではない。
  • コントラスト比が高くても、背景色が高彩度色である場合には、読みにくいと感じられる場合が多い。
  • 高彩度の赤・緑が入ってくると、コントラスト比に関わらず、読みにくいという割合が増える。
  • 彩度差が低めとなるためか、有彩色同士の組み合わせは減点傾向のため、レベルAAクリアではやや不足。

アンケートでは好みの差も含まれていますが、大きくこのような傾向が出ていると思われます。

このような結果から、以下のように提言させていただきます。

  • 文字の背景色は見出しやボタン、文章内の一部の強調のような短めの文章が望ましい。
  • 逆に長文を読ませたいなら、白あるいは薄い灰色の背景色に、黒か濃い灰色の文字。
  • コントラストが高いのが望ましいが、背景色が高彩度色になる場合には、明度・彩度をやや落とすのが望ましい。
  • 文字は小さくなるほど読みにくくなるので、よりコントラストに気を遣うようにする。

あくまでご参考に。

文章全体に背景色

見出しのみに背景色

文字のサイズによる見え方の違い関連記事：

]]> http://www.webcolordesign.net/color_point/usability/research_contrast/%e6%96%87%e5%ad%97%e3%81%ae%e8%aa%ad%e3%81%bf%e3%82%84%e3%81%99%e3%81%95%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e3%81%be%e3%81%a8%e3%82%81.html/feed 0 「文字の読みやすさ」に関するアンケートの集計結果に対する感想 http://www.webcolordesign.net/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e9%9b%86%e8%a8%88%e7%b5%90%e6%9e%9c%e3%81%ab%e5%af%be%e3%81%99%e3%82%8b%e6%84%9f%e6%83%b3.html http://www.webcolordesign.net/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e9%9b%86%e8%a8%88%e7%b5%90%e6%9e%9c%e3%81%ab%e5%af%be%e3%81%99%e3%82%8b%e6%84%9f%e6%83%b3.html#comments Tue, 18 May 2010 10:45:08 +0000 http://www.webcolordesign.com/?p=588 回答の2色がWCAG2.0のコントラスト比とWCAG1.0の色差・明度差をクリアしているかどうかの判定をし、同じ色の組み合わせを反転させたときの回答を比較して、感想を書いてみました。詳しい考察ではなく、私の主観と推測ですのでご注意ください。

WCAG2.0のコントラスト比達成基準は、

WCAG 2.0 達成基準 1.4.3 最小コントラスト(レベル AA)
テキスト (および画像化された文字) には、4.5:1以上のコントラスト比が必要。
ただし、大きいテキストまたは画像上の大きい文字 (18 ポイント以上、あるいは14 ポイント以上の太字)には3:1以上のコントラスト比が必要。
WCAG 2.0 達成基準 1.4.6 コントラスト(レベル AAA)
テキスト (および画像化された文字) には、7:1以上のコントラスト比が必要である。ただし、大きいテキストまたは画像上の大きい文字 (18 ポイント以上、あるいは14 ポイント以上の太字) は 4.5:1以上のコントラスト比があればよい

」となっております。今回のアンケートでは18ポイントの文字を使っておりますので、「大きい文字」の基準で判定しております。

設問1と設問26

WCAG2.0
コントラスト比 4.5:1（レベルAAAに適合）
WCAG1.0
色差 350（基準値500をクリアせず）
明度差 134（基準値125をクリア）
#FFFFFFと#9364A8の組み合わせ
選択肢
とても読みやすい 10 31
やや読みやすい 41 44
どちらでもない 19 19
やや読みにくい 25 3
とても読みにくい 2 0
まったく読めない 0 0

WCAG2.0のコントラスト比はレベルAAAをクリアしていますが、WCAG1.0の方では明度差のみのクリアとなっております。

背景色が暗い方が、全般的にやや読みやすいという結果となりました。いただいたコメントにもありましたが、同じ色の組み合わせでも読みやすさが変わるということのようです。

設問2と設問27

WCAG2.0
コントラスト比 2.7:1（レベルAAに不適合）
WCAG1.0
色差 377（基準値500をクリアせず）
明度差 104（基準値125をクリアせず）
#FFFFFFと#B39C35の組み合わせ
選択肢
とても読みやすい 4 23
やや読みやすい 13 38
どちらでもない 18 22
やや読みにくい 56 13
とても読みにくい 6 1
まったく読めない 0 0

こちらはどの基準も達成していないのですが、背景色が暗い方が読みやすいという結果が出ています。

もしかすると文字が白であることで、膨張色の効果で文字が太く見えることが関連しているのかもしれません。

設問3と設問28

WCAG2.0
コントラスト比 9.8:1（レベルAAAに適合）
WCAG1.0
色差 408（基準値500をクリアせず）
明度差 166（基準値125をクリア）
#FF9900と#000000の組み合わせ
選択肢
とても読みやすい 27 20
やや読みやすい 32 29
どちらでもない 14 24
やや読みにくい 21 22
とても読みにくい 3 2
まったく読めない 0 0

こちらはコントラストは十分の組み合わせですが、比較的結果はばらけています。

読みやすさとは別に色の好みが結果に表れているのかもしれません。基準値をクリアしていればよいということではないようです。

今回の調査では短めの文章ですが、背景色と文字色が入れ替わってもあまり差は出ていませんが、長文になればより差が出てくる気もします。

設問4と設問29

WCAG2.0
コントラスト比 3.3:1（レベルAAに適合）
WCAG1.0
色差 399（基準値500をクリアせず）
明度差 127（基準値125をクリア）
#FFC8C8と#008080の組み合わせ
選択肢
とても読みやすい 5 7
やや読みやすい 21 24
どちらでもない 29 25
やや読みにくい 36 39
とても読みにくい 6 2
まったく読めない 0 0

WCAG2.0のコントラスト比はレベルAA、WCAG1.0の方は明度差のみのクリアとなっています。

読めないことはないが、好きこのんで読みたくないというところでしょうか。

設問5と設問30

WCAG2.0
コントラスト比 12.6:1（レベルAAAに適合）
WCAG1.0
色差 612 （基準値500をクリア）
明度差 204 （基準値125をクリア）
#333333と#FFFFFFの組み合わせ
選択肢
とても読みやすい 50 56
やや読みやすい 31 33
どちらでもない 11 7
やや読みにくい 5 1
とても読みにくい 0 0
まったく読めない 0 0

基準値は全てクリアしています。正直なところ、この組み合わせを否定されたらどうしようもないというところです。

背景色が白の方がやや読みやすいという結果ですが、この辺りは好みなどの誤差の範囲かと考えています。

設問6と設問31

WCAG2.0
コントラスト比 1.8:1（レベルAAに不適合）
WCAG1.0
色差 179（基準値500をクリアせず）
明度差 56（基準値125をクリア）
#FFFFFFと#9364A8の組み合わせ
選択肢
とても読みやすい 0 0
やや読みやすい 2 6
どちらでもない 6 9
やや読みにくい 30 59
とても読みにくい 58 23
まったく読めない 1 0

どれも基準値にはるかに及ばない数字になっています。これだけ読みにくい人が多いということは、避けた方がよい配色でしょう。

まったく読めないという回答も一人ありました。

設問7と設問32

WCAG2.0
コントラスト比 14.3:1（レベルAAに不適合）
WCAG1.0
色差 624 （基準値500をクリアせず）
明度差 208（基準値125をクリアせず）
#F1F1F1と#212121の組み合わせ
選択肢
とても読みやすい 74 46
やや読みやすい 19 36
どちらでもない 3 8
やや読みにくい 1 7
とても読みにくい 0 0
まったく読めない 0 0

こちらも基準値ははるかに超えており、かなり多くの方が読みやすいという方向で回答されています。

設問5と30の組み合わせに非常に近い色ですが、ややコントラストが高くなっています。背景が薄いグレーになっている方が、「圧倒的にとても読みやすい」という回答が多いという結果になっているのがおもしろいところです。どのような理由から来るものなのか考えてみるべき場所かもしれません。

設問8と設問33

WCAG2.0
コントラスト比 1.1:1（レベルAAに不適合）
WCAG1.0
色差 323（基準値500をクリアせず）
明度差 33（基準値125をクリア）
#458504と#FF0000の組み合わせ
選択肢
とても読みやすい 1 0
やや読みやすい 2 1
どちらでもない 2 0
やや読みにくい 17 5
とても読みにくい 71 66
まったく読めない 4 25

およそ読みにくいことが想像される、推奨されない組み合わせの代表的な例ですが、背景色が赤い方が全く読めないという方が非常に多くなっているのが興味深い点です。

設問9と設問34

WCAG2.0
コントラスト比 2.9:1（レベルAAに不適合）
WCAG1.0
色差 326（基準値500をクリアせず）
明度差 88（基準値125をクリアせず）
#E4A2F2と#666666の組み合わせ
選択肢
とても読みやすい 5 5
やや読みやすい 32 25
どちらでもない 28 25
やや読みにくい 29 34
とても読みにくい 3 8
まったく読めない 0 0

コントラスト比がぎりぎり基準に満たないという数字でこの結果が出ておりますので、この規格はある程度妥当な基準値が設定してあるなと感じました。

実はこの組み合わせも全ての基準をクリアしていない組み合わせになっています。好みが出ているのかもしれませんが、「やや読みやすい」「とても読みやすい」の方がかなり多いという結果となっています。

設問10と設問35

WCAG2.0
コントラスト比 4:1（レベルAAに適合）
WCAG1.0
色差 510（基準値500をクリア）
明度差 179（基準値125をクリア）
#FF0000と#FFFFFFの組み合わせ
選択肢
とても読みやすい 19 41
やや読みやすい 25 35
どちらでもない 17 17
やや読みにくい 28 4
とても読みにくい 8 0
まったく読めない 0 0

WCAG2.0のコントラスト比がレベルAAとなっており、1.0の方では両方クリアしています。

ですが、赤い背景の方が読みにくいという方がかなり多いようです。文字は白ですので、膨張色の効果も期待できそうですが、それ以上に読みにくい要因があるのかもしれません。

設問11と設問36

WCAG2.0
コントラスト比 9.2:1（レベルAAAに適合）
WCAG1.0
色差 306（基準値500をクリアせず）
明度差 98 （基準値125をクリアせず）
#333333と#00FF00の組み合わせ
選択肢
とても読みやすい 29 9
やや読みやすい 34 22
どちらでもない 14 15
やや読みにくい 18 42
とても読みにくい 2 0
まったく読めない 0 0

コントラスト比は9.2:1とかなり高い数字になっているのですが、色差・明度差とも基準値に達していません。

こちらは緑背景の方が、圧倒的に読みにくい割合が増えています。彩度の高すぎる背景色は好まれないのかもしれません。

設問12と設問37

WCAG2.0
コントラスト比 8.6:1（レベルAAAに適合）
WCAG1.0
色差 510（基準値500をクリア）
明度差 226（基準値125をクリア）
#FFFFFFと#0000FFの組み合わせ
選択肢
とても読みやすい 61 27
やや読みやすい 28 31
どちらでもない 5 17
やや読みにくい 3 20
とても読みにくい 0 2
まったく読めない 0 0

こちらはコントラスト比が十分で、リンク色に使われているのも納得の組み合わせです。

ただし背景色が青い場合には、とても読みやすいという比率はかなり下がります。やはり高彩度の背景色はあまり好まれていないようです。

設問13と設問38

WCAG2.0
コントラスト比 1.7:1（レベルAAに不適合）
WCAG1.0
色差 358（基準値500をクリアせず）
明度差 53（基準値125をクリアせず）
#B4E5F8と#F39521の組み合わせ
選択肢
とても読みやすい 2 1
やや読みやすい 4 3
どちらでもない 14 8
やや読みにくい 52 48
とても読みにくい 25 36
まったく読めない 0 1

こちらもいずれの基準値も満たさないかなり読みにくい組み合わせです。

オレンジの背景色をとても読みにくいとされた方が多めになっています。

設問14と設問39

WCAG2.0
コントラスト比 8:1（レベルAAAに適合）
WCAG1.0
色差 765（基準値500をクリア）
明度差 196（基準値125をクリア）
#FFFF00と#0000FFの組み合わせ
選択肢
とても読みやすい 19 19
やや読みやすい 30 30
どちらでもない 17 20
やや読みにくい 27 23
とても読みにくい 4 5
まったく読めない 0 0

いずれの基準値も満たす、コントラスト十分の組み合わせですが、やや読みにくいと判断された方がかなり多くなっています。

補色に近い配色になりますので、数値以上にコントラストが強いと感じられるのかもしれません。青背景に黄文字の分布は、設問37の青背景に白文字とそれほど変わりませんが、黄色背景に青文字は、設問36の白背景に青文字よりもずっと読みにくいという結果になります。

読みやすさに背景色の彩度がかなり関連性があることを示唆しているように思えます。

設問15と設問40

WCAG2.0
コントラスト比 9.8:1（レベルAAAに適合）
WCAG1.0
色差 592（基準値500をクリア）
明度差 189（基準値125をクリア）
#FDF8F4と#663300の組み合わせ
選択肢
とても読みやすい 52 37
やや読みやすい 40 36
どちらでもない 5 18
やや読みにくい 0 6
とても読みにくい 0 0
まったく読めない 0 0

この組み合わせもコントラストは十分の組み合わせです。

白背景の方がやや読みやすいという傾向が出ていますが、茶背景の方もなかなか読みやすいようです。

白文字は膨張色の効果が出るのではないかという仮説をさっき書きましたが、ここではあまり感じられません。あるいは他の要因があるのでしょうか。

設問16と設問41

WCAG2.0
コントラスト比 4.3:1（レベルAAに適合）
WCAG1.0
色差 278（基準値500をクリアせず）
明度差 96（基準値125をクリアせず）
#43A4CEと#00356Aの組み合わせ
選択肢
とても読みやすい 5 3
やや読みやすい 24 16
どちらでもない 31 21
やや読みにくい 32 44
とても読みにくい 5 13
まったく読めない 0 0

コントラスト比はレベルAAをクリアしていますので、読めないことはないという基準の組み合わせになります。ただし、WCAG1.0の方では基準値にまったく届いていません。

「とても読みやすい」という方もいらっしゃいますが、読みにくいという方も多いので、これもWCAG2.0のコントラスト比がそれなりに妥当であるという印象を受けます。

設問17と設問42

WCAG2.0
コントラスト比 10.7:1（レベルAAAに適合）
WCAG1.0
色差 443（基準値500をクリアせず）
明度差 190（基準値125をクリア）
#043C0Cと#FFF000の組み合わせ
選択肢
とても読みやすい 27 24
やや読みやすい 37 34
どちらでもない 16 22
やや読みにくい 14 15
とても読みにくい 3 2
まったく読めない 0 0

WCAG1.0の色差だけ基準を満たしていないのですが、それもわずかなことです。色の組み合わせが変わってもそれほど結果に差はありません。

この組み合わせも好みの差が出ているのかもしれませんが、高彩度色の組み合わせの中では、比較的無難な結果となっています。ただし積極的に使いたいという組み合わせでもありません。

設問18と設問43

WCAG2.0
コントラスト比 7.5:1（レベルAAAに適合）
WCAG1.0
色差 552（基準値500をクリア）
明度差 186（基準値125をクリア）
#FFFFFFと#075D71の組み合わせ
選択肢
とても読みやすい 45 36
やや読みやすい 40 43
どちらでもない 11 15
やや読みにくい 1 2
とても読みにくい 0 1
まったく読めない 0 0

いずれの基準も満たす組み合わせで、概ね読みやすいという評価をしていいかと思います。

背景色が青緑の方が、「とても読みやすい」が減っていることについては、検討が必要でしょう。

設問19と設問44

WCAG2.0
コントラスト比 5.3:1（レベルAAAに適合）
WCAG1.0
色差 255（基準値500をクリアせず）
明度差 76（基準値125をクリアせず）
#000000と#FF0000の組み合わせ
選択肢
とても読みやすい 8 1
やや読みやすい 25 8
どちらでもない 15 18
やや読みにくい 38 40
とても読みにくい 9 28
まったく読めない 2 2

WCAG2.0のコントラスト比はクリアしていますが、色差・明度差とも基準には遠く及びません。どちらかというと読みにくいという人の方が多い組み合わせであることに要注意です。

設問10と35の時は文字が白でしたが、背景色が鮮やかな赤の場合には、読みにくさが増すようです。アクセントとして非常に重要な色なので、使い方に気をつける必要がありそうです。

設問20と設問45

WCAG2.0
コントラスト比 9.4:1（レベルAAAに適合）
WCAG1.0
色差 509（基準値500をクリア）
明度差 203（基準値125をクリア）
#FFFFFFと#800080の組み合わせ
選択肢
とても読みやすい 30 29
やや読みやすい 51 31
どちらでもない 13 22
やや読みにくい 3 14
とても読みにくい 0 1
まったく読めない 0 0

どの基準値をクリアする配色です。訪問済みのリンク色として使わることにも納得出来ます。

この紫は比較的彩度が高いせいか、背景色になった場合には読みにくくなるのかもしれません。

設問21と設問46

WCAG2.0
コントラスト比 5.7:1（レベルAAAに適合）
WCAG1.0
色差 459（基準値500をクリアせず）
明度差 153（基準値125をクリア）
#FFFFFFと#666666の組み合わせ
選択肢
とても読みやすい 42 38
やや読みやすい 37 39
どちらでもない 14 17
やや読みにくい 4 3
とても読みにくい 0 0
まったく読めない 0 0

この組み合わせもよく使われる組み合わせですが、色差だけはクリアしておりません。

設問5と30の組み合わせに比べると、ややコントラストが低い組み合わせとなっていますが、「とても読みやすい」の比率はやや下がっています。この例のように短い文章である場合には、やや物足りないコントラストなのかもしれませんが、長文の場合にはどうかというのは今度の研究課題でしょう。

設問22と設問47

WCAG2.0
コントラスト比 2.1:1（レベルAAに不適合）
WCAG1.0
色差 354（基準値500をクリアせず）
明度差 89（基準値125をクリアせず）
#FFFFFFと#FF9903の組み合わせ
選択肢
とても読みやすい 5 7
やや読みやすい 23 21
どちらでもない 30 25
やや読みにくい 36 40
とても読みにくい 3 4
まったく読めない 0 0

いずれの基準にも満たない組み合わせで、背景色と文字色を入れ替えても結果に差は出ませんでした。私の主観ではあらためて2つ並べてみると、オレンジが背景の方が見えやすいように感じました。皆さんの環境ではいかがでしょうか？

設問23と設問48

WCAG2.0
コントラスト比 3.2:1（レベルAAに適合）
WCAG1.0
色差 339（基準値500をクリアせず）
明度差 96（基準値125をクリアせず）
#CFB7FFと#666666の組み合わせ
選択肢
とても読みやすい 9 2
やや読みやすい 30 15
どちらでもない 35 30
やや読みにくい 20 45
とても読みにくい 3 5
まったく読めない 0 0

これもコントラスト比はかろうじてクリアしているという数値になっています。この付近の数値の場合、「どちらでもない」を中心に「やや読みやすい」と「やや読みにくい」の両方が出てくるように思います。

そのような意味で、WCAG2.0のコントラスト比のレベルAAという基準は、最低限読めるけれども、やや物足りないという位置づけが出来るのかもしれません。

設問24と設問49

WCAG2.0
コントラスト比 4.5:1（レベルAAAに適合）
WCAG1.0
色差 419（基準値500をクリアせず）
明度差 133（基準値125をクリア）
#FFE4C4と#9F5510の組み合わせ
選択肢
とても読みやすい 18 16
やや読みやすい 50 38
どちらでもない 25 24
やや読みにくい 4 17
とても読みにくい 0 2
まったく読めない 0 0

色差以外は基準値をクリアしています。

ただし背景色が暗い場合には、「やや読みにくい」という数字が増えています。

設問25と設問50

WCAG2.0
コントラスト比 4.5:1（レベルAAAに適合）
WCAG1.0
色差 474 （基準値500をクリアせず）
明度差 143（基準値125をクリア）
#64803Fと#FFFFFFの組み合わせ
選択肢
とても読みやすい 41 18
やや読みやすい 38 43
どちらでもない 17 23
やや読みにくい 1 13
とても読みにくい 0 0
まったく読めない 0 0

上の設問24と49と同様に、色差以外はクリアしている例で、コントラスト比は4.5:1となっています。

ただし背景色が緑色の場合に、とても「読みやすい」と「読みやすい」が大変多くなっているのが特徴です。同じコントラスト比でかなり差が出ているのがおもしろい結果となりました。この辺りも要検討でしょう。

関連記事：

]]> http://www.webcolordesign.net/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e9%9b%86%e8%a8%88%e7%b5%90%e6%9e%9c%e3%81%ab%e5%af%be%e3%81%99%e3%82%8b%e6%84%9f%e6%83%b3.html/feed 0 「文字の読みやすさ」に関するアンケートの設問について http://www.webcolordesign.net/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e8%a8%ad%e5%95%8f%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html http://www.webcolordesign.net/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e8%a8%ad%e5%95%8f%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html#comments Tue, 18 May 2010 09:22:52 +0000 http://www.webcolordesign.com/?p=587 調査結果の考察に入る前にまずはいただいたご意見を踏まえて、どのような基準で設問を作ったかを説明したいと思います。

今回の調査では、条件付けはほとんどせず、テキストは「コントラスト比と読みやすさ」としました。今にして思えば配色と全然関係ない言葉でもよかったようにも思いますが、気づいたときにはいくつか回答をいただいておりましたので、やむを得ずそのままにしておりました。

背景色が全面に大きく使われている場合には、当然回答も変わってくるかと思います。短い文章にしたのは、見出しに使用する場合を想定したからです。これは背景色が全面に施されるよりも、見出しなどの一部に使われることが多いというところからです。もちろん今回の例のようなサイズだと見えやすい場合でも、全面に使えば見えにくいと感じることも多々あるかと思いますが、逆にこのサイズでも見えにくいものは、大きく使っても見えにくいと思います。

そして色の問題ですので、個人の好みの差が出るはずですが、そこまで考えていくと、ただでさえ多い設問や選択肢がもっと増えていくので、今回は大雑把な方向のようなものがわかればよいと考えています。

またいくつかの組み合わせを除いては、実際にウェブ上で見かけた配色を使っています。気づかれた方も多いと思いますが、設問1～25と設問26～50は同じ色の組み合わせを反転させたものになっています。WCAG1.0の色差・明度差やWCAG2.0のコントラスト比はあくまで、2色の差だけに着目した基準ですが、「実際にはどちらを背景にするかによって、感じ方に差が出るのではないか」という仮説を立てて設問を作った結果、全部で50問という数になってしまいました。長いアンケートに最後までお付き合いいただいた方には心から感謝いたします。

フォントによっても読みやすさが変わるのはご意見をいただいたとおりです。メイリオフォントという例を挙げていただきましたが、フォントが大きくなる、太くなるということは、文字の各部が太くなりますので、その分コントラストが出やすくなるので、読みやすくなるはずです。OSやブラウザによってもフォントは変わりますし、アンチエイリアスの掛かり方も変わりますし、モニターによって見え方が異なるのも当然です。またそれぞれが設定をカスタマイズしていることも考えられますので、今回はアンチエイリアスなしの18ポイントの「MS P ゴシック」ということで、画像を作りました。
関連記事：

]]> http://www.webcolordesign.net/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e8%a8%ad%e5%95%8f%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html/feed 0 「文字の読みやすさ」に関するアンケートの集計結果1（生データ） http://www.webcolordesign.net/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e9%9b%86%e8%a8%88%e7%b5%90%e6%9e%9c1%ef%bc%88%e7%94%9f%e3%83%87%e3%83%bc%e3%82%bf%ef%bc%89.html http://www.webcolordesign.net/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e9%9b%86%e8%a8%88%e7%b5%90%e6%9e%9c1%ef%bc%88%e7%94%9f%e3%83%87%e3%83%bc%e3%82%bf%ef%bc%89.html#comments Sun, 02 May 2010 06:22:59 +0000 http://www.webcolordesign.com/?p=534 アンケートの生データ

2010年2月19日から4月30日のかけて、文字の読みやすさに関するアンケートを実施し、98名の方の回答をいただきました。ご協力ありがとうございました。考察は後ほど加えるとしまして、まずは結果の生データを公開しておきます。

質問は「この色の組み合わせは読みやすいですか？」とだけ記し、特に条件などは設けておりません。異なる背景と文字の組み合わせを読んでもらい、それぞれを「とても読みやすい」「やや読みやすい」「どちらでもない」「やや読みにくい」「とても読みにくい」「まったく読めない」の6段階で分類していただきました。

設問1

背景色：#FFFFFF　文字色：#9364A8
選択肢 回答数
とても読みやすい 10
やや読みやすい 41
どちらでもない 19
やや読みにくい 25
とても読みにくい 2
まったく読めない 0

設問2

背景色：#FFFFFF　文字色：#B39C35
選択肢 回答数
とても読みやすい 4
やや読みやすい 13
どちらでもない 18
やや読みにくい 56
とても読みにくい 6
まったく読めない 0

設問3

背景色：#FF9900　文字色：#000000
選択肢 回答数
とても読みやすい 27
やや読みやすい 32
どちらでもない 14
やや読みにくい 21
とても読みにくい 3
まったく読めない 0

設問4

背景色：#FFC8C8　文字色：#008080
選択肢 回答数
とても読みやすい 5
やや読みやすい 21
どちらでもない 29
やや読みにくい 36
とても読みにくい 6
まったく読めない 0

設問5

背景色：#333333　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 50
やや読みやすい 31
どちらでもない 11
やや読みにくい 5
とても読みにくい 0
まったく読めない 0

設問6

背景色：#CFFCF5　文字色：#CBB290
選択肢 回答数
とても読みやすい 0
やや読みやすい 2
どちらでもない 6
やや読みにくい 30
とても読みにくい 58
まったく読めない 1

設問7

背景色：#F1F1F1　文字色：#212121
選択肢 回答数
とても読みやすい 74
やや読みやすい 19
どちらでもない 3
やや読みにくい 1
とても読みにくい 0
まったく読めない 0

設問8

背景色：#458504　文字色：#FF0000
選択肢 回答数
とても読みやすい 1
やや読みやすい 2
どちらでもない 2
やや読みにくい 17
とても読みにくい 71
まったく読めない 4

設問9

背景色：#E4A2F2　文字色：#666666
選択肢 回答数
とても読みやすい 5
やや読みやすい 32
どちらでもない 28
やや読みにくい 29
とても読みにくい 3
まったく読めない 0

設問10

背景色：#FF0000　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 19
やや読みやすい 25
どちらでもない 17
やや読みにくい 28
とても読みにくい 8
まったく読めない 0

設問11

背景色：#333333　文字色：#00FF00
選択肢 回答数
とても読みやすい 29
やや読みやすい 34
どちらでもない 14
やや読みにくい 18
とても読みにくい 2
まったく読めない 0

設問12

背景色：#FFFFFF　文字色：#0000FF
選択肢 回答数
とても読みやすい 61
やや読みやすい 28
どちらでもない 5
やや読みにくい 3
とても読みにくい 0
まったく読めない 0

設問13

背景色：#B4E5F8　文字色：#F39521
選択肢 回答数
とても読みやすい 2
やや読みやすい 4
どちらでもない 14
やや読みにくい 52
とても読みにくい 25
まったく読めない 0

設問14

背景色：#FFFF00　文字色：#0000FF
選択肢 回答数
とても読みやすい 19
やや読みやすい 30
どちらでもない 17
やや読みにくい 27
とても読みにくい 4
まったく読めない 0

設問15

背景色：#FDF8F4　文字色：#663300
選択肢 回答数
とても読みやすい 52
やや読みやすい 40
どちらでもない 5
やや読みにくい 0
とても読みにくい 0
まったく読めない 0

設問16

背景色：#43A4CE　文字色：#00356A
選択肢 回答数
とても読みやすい 5
やや読みやすい 24
どちらでもない 31
やや読みにくい 32
とても読みにくい 5
まったく読めない 0

設問17

背景色：#043C0C　文字色：#FFF000
選択肢 回答数
とても読みやすい 27
やや読みやすい 37
どちらでもない 16
やや読みにくい 14
とても読みにくい 3
まったく読めない 0

設問18

背景色：#FFFFFF　文字色：#075D71
選択肢 回答数
とても読みやすい 45
やや読みやすい 40
どちらでもない 11
やや読みにくい 1
とても読みにくい 0
まったく読めない 0

設問19

背景色：#000000　文字色：#FF0000
選択肢 回答数
とても読みやすい 8
やや読みやすい 25
どちらでもない 15
やや読みにくい 38
とても読みにくい 9
まったく読めない 2

設問20

背景色：#FFFFFF　文字色：#800080
選択肢 回答数
とても読みやすい 30
やや読みやすい 51
どちらでもない 13
やや読みにくい 3
とても読みにくい 0
まったく読めない 0

設問21

背景色：#FFFFFF　文字色：#666666
選択肢 回答数
とても読みやすい 42
やや読みやすい 37
どちらでもない 14
やや読みにくい 4
とても読みにくい 0
まったく読めない 0

設問22

背景色：#FFFFFF　文字色：#FF9903
選択肢 回答数
とても読みやすい 5
やや読みやすい 23
どちらでもない 30
やや読みにくい 36
とても読みにくい 3
まったく読めない 0

設問23

背景色：#CFB7FF　文字色：#666666
選択肢 回答数
とても読みやすい 9
やや読みやすい 30
どちらでもない 35
やや読みにくい 20
とても読みにくい 3
まったく読めない 0

設問24

背景色：#FFE4C4　文字色：#9F5510
選択肢 回答数
とても読みやすい 18
やや読みやすい 50
どちらでもない 25
やや読みにくい 4
とても読みにくい 0
まったく読めない 0

設問25

背景色：#64803F　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 41
やや読みやすい 38
どちらでもない 17
やや読みにくい 1
とても読みにくい 0
まったく読めない 0

設問26

背景色：#9364A8　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 31
やや読みやすい 44
どちらでもない 19
やや読みにくい 3
とても読みにくい 0
まったく読めない 0

設問27

背景色：#B39C35　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 23
やや読みやすい 38
どちらでもない 22
やや読みにくい 13
とても読みにくい 1
まったく読めない 0

設問28

背景色：#000000　文字色：#FF9900
選択肢 回答数
とても読みやすい 20
やや読みやすい 29
どちらでもない 24
やや読みにくい 22
とても読みにくい 2
まったく読めない 0

設問29

背景色：#008080　文字色：#FFC8C8
選択肢 回答数
とても読みやすい 7
やや読みやすい 24
どちらでもない 25
やや読みにくい 39
とても読みにくい 2
まったく読めない 0

設問30

背景色：#FFFFFF　文字色：#333333
選択肢 回答数
とても読みやすい 56
やや読みやすい 33
どちらでもない 7
やや読みにくい 1
とても読みにくい 0
まったく読めない 0

設問31

背景色：#CBB290　文字色：#CFFCF5
選択肢 回答数
とても読みやすい 0
やや読みやすい 6
どちらでもない 9
やや読みにくい 59
とても読みにくい 23
まったく読めない 0

設問32

背景色：#212121　文字色：#F1F1F1
選択肢 回答数
とても読みやすい 46
やや読みやすい 36
どちらでもない 8
やや読みにくい 7
とても読みにくい 0
まったく読めない 0

設問33

背景色：#FF0000　文字色：#458504
選択肢 回答数
とても読みやすい 0
やや読みやすい 1
どちらでもない 0
やや読みにくい 5
とても読みにくい 66
まったく読めない 25

設問34

背景色：#666666　文字色：#E4A2F2
選択肢 回答数
とても読みやすい 5
やや読みやすい 25
どちらでもない 25
やや読みにくい 34
とても読みにくい 8
まったく読めない 0

設問35

背景色：#FFFFFF　文字色：#FF0000
選択肢 回答数
とても読みやすい 41
やや読みやすい 35
どちらでもない 17
やや読みにくい 4
とても読みにくい 0
まったく読めない 0

設問36

背景色：#00FF00　文字色：#333333
選択肢 回答数
とても読みやすい 9
やや読みやすい 22
どちらでもない 15
やや読みにくい 42
とても読みにくい 9
まったく読めない 0

設問37

背景色：#0000FF　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 27
やや読みやすい 31
どちらでもない 17
やや読みにくい 20
とても読みにくい 2
まったく読めない 0

設問38

背景色：#F39521　文字色：#B4E5F8
選択肢 回答数
とても読みやすい 1
やや読みやすい 3
どちらでもない 8
やや読みにくい 48
とても読みにくい 36
まったく読めない 1

設問39

背景色：#0000FF　文字色：#FFFF00
選択肢 回答数
とても読みやすい 19
やや読みやすい 30
どちらでもない 20
やや読みにくい 23
とても読みにくい 5
まったく読めない 0

設問40

背景色：#663300　文字色：#FDF8F4
選択肢 回答数
とても読みやすい 37
やや読みやすい 36
どちらでもない 18
やや読みにくい 6
とても読みにくい 0
まったく読めない 0

設問41

背景色：#00356A　文字色：#43A4CE
選択肢 回答数
とても読みやすい 3
やや読みやすい 16
どちらでもない 21
やや読みにくい 44
とても読みにくい 13
まったく読めない 0

設問42

背景色：#FFF000　文字色：#043C0C
選択肢 回答数
とても読みやすい 24
やや読みやすい 34
どちらでもない 22
やや読みにくい 15
とても読みにくい 2
まったく読めない 0

設問43

背景色：#075D71　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 36
やや読みやすい 43
どちらでもない 15
やや読みにくい 2
とても読みにくい 1
まったく読めない 0

設問44

背景色：#FF0000　文字色：#000000
選択肢 回答数
とても読みやすい 1
やや読みやすい 8
どちらでもない 18
やや読みにくい 40
とても読みにくい 28
まったく読めない 2

設問45

背景色：#800080　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 29
やや読みやすい 31
どちらでもない 22
やや読みにくい 14
とても読みにくい 1
まったく読めない 0

設問46

背景色：#666666　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 38
やや読みやすい 39
どちらでもない 17
やや読みにくい 3
とても読みにくい 0
まったく読めない 0

設問47

背景色：#FF9903　文字色：#FFFFFF
選択肢 回答数
とても読みやすい 7
やや読みやすい 21
どちらでもない 25
やや読みにくい 40
とても読みにくい 4
まったく読めない 0

設問48

背景色：#666666　文字色：#CFB7FF
選択肢 回答数
とても読みやすい 2
やや読みやすい 15
どちらでもない 30
やや読みにくい 45
とても読みにくい 5
まったく読めない 0

設問49

背景色：#9F5510　文字色：#FFE4C4
選択肢 回答数
とても読みやすい 16
やや読みやすい 38
どちらでもない 24
やや読みにくい 17
とても読みにくい 2
まったく読めない 0

設問50

背景色：#FFFFFF　文字色：#64803F
選択肢 回答数
とても読みやすい 18
やや読みやすい 43
どちらでもない 23
やや読みにくい 13
とても読みにくい 0
まったく読めない 0

回答者の属性

回答者の男女比
性別 人数
男性 57
女性 41
回答者の年齢層
年齢 人数
0～ 9歳 0
10～ 19歳 2
20～ 29歳 35
30～ 39歳 43
40～ 49歳 13
50～ 59歳 5
60～ 69歳 0

いただいたご意見・ご感想

  • 「読みやすい」を選んだ物でも、長文になると嫌だろうなと思うのがわりとありました。特に赤を使ったもの。考察楽しみにしています。
  • バックは薄く、文字が濃いのがいいと感じます。
  • 問が多くて、前のはどうだったっけ？と思いました。ずっと見ていると自分の中の基準があいまいになります。とりあえず白背景は確実に文字が読めるので無難だと思いました。
  • 質問数が多くてびっくりしました。。。。最近、偏頭痛がひどく、パソコンを見ている時間が長い事も原因かと思います。中には、サイトの配色がきつくて、読みづらいわ、頭は痛くなるわで、困ることも。
    わざとそういう風にしているのかもしれませんが、配色しだいであらゆる効果みたいなものをもたらすものだな、と思っています。
  • 読み易さという点におけるコントラスト比に着目して閲覧し回答しているため、文字色と背景色の配色としての美的感覚は気にしておりません。
  • 結果とか知りたいですw
  • 長い
  • 直感のみでの判断ですので、ちょっと偏り気味かもしれません。作例の文字が細かったせいか、地色が合った上での文字は読みやすく感じました。
  • 松下です。お久しぶりです。見たときの不快さも含め、直感的に回答してみました。枠外が白背景ですので、枠内の背景色が濃いと、どうしても「読みにくい」に寄りますね。あと、IE8のバグだと思いますが、ページをスクロールすると、太字というか、線がにじむ感じにレンダリングされる場合があるようです。（チェックをつけ直すと細線にもどる。）
  • 読みやすいか読みにくいか考える前に、色の好みが出てしまって、けっこう好きか好きじゃないで判断した部分があると思います。いいのか悪いのかわかりませんが、アンケートの数になれれば。
  • サンプル程度の文字数について考える場合と、ページ一面がこの色の組み合わせの場合を考えると、回答が違ってくるように思います。
  • 例文が恣意的に回答を誘導すると思います
  • 字が細いので背景色があると読みやすかったです。
  • すごく興味深いです。ありがとうございました。
  • この結果は、集計後公表されるのでしょうか？
    私も今、視認性などについて自分で研究している過程なので、もしよかったら、どのような基準で設問を作っていたか知りたいです。
  • 毎回、丁寧な解説に感謝しています。配色だけに拘らず、webデザイン全般に関して参考になる事がとても多くて、更新があると「ラッキー♪」等と思い、興味津々な気持ちで閲覧させて貰っています。これからも体には、お気をつけて、更新の方、続けて下さいね、応援しています！
  • 背景色と文字色の色を入れ替えただけでも見えやすさが変わりますね。
  • 画面全部がこの色だったら、と思うと怖いパターンも有ります。
  • 読みやすさというのはフォントの種類によっても左右されるのではないかな？とも思いました。（メイリオフォントならもっと字体が太いので文字部分が占める色の割合が変わってくる等）
  • 読みやすくはあるが不快なものとそうでないものがあるのでそれを区別出来ればと思いました。
  • 一瞬で判定しました。考えてると　うーん　よくわからん。。。と　なってしまいますので。
  • 色々な配色で楽しくアンケートに答えさせて頂きました。文字量でもかなり変わってくると思うので、クリックすると大きな画面に大量の文字…と言ったものも見られる様になってると良いなぁと思いました。
  • 鮮やかな色は目に優しくないですね
  • 赤や黄色などの強い色が背景色の組み合わせは目がちかちかしてとても読みにくかった。
    背景色はアースカラー系の色のほうが読みやすいと思う。

関連記事：

]]> http://www.webcolordesign.net/color_point/usability/research_contrast/%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%81%ae%e9%9b%86%e8%a8%88%e7%b5%90%e6%9e%9c1%ef%bc%88%e7%94%9f%e3%83%87%e3%83%bc%e3%82%bf%ef%bc%89.html/feed 0 Webの配色に関する調査のご協力お願いします http://www.webcolordesign.net/others/web%e3%81%ae%e9%85%8d%e8%89%b2%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e8%aa%bf%e6%9f%bb%e3%81%ae%e3%81%94%e5%8d%94%e5%8a%9b%e3%81%8a%e9%a1%98%e3%81%84%e3%81%97%e3%81%be%e3%81%99.html http://www.webcolordesign.net/others/web%e3%81%ae%e9%85%8d%e8%89%b2%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e8%aa%bf%e6%9f%bb%e3%81%ae%e3%81%94%e5%8d%94%e5%8a%9b%e3%81%8a%e9%a1%98%e3%81%84%e3%81%97%e3%81%be%e3%81%99.html#comments Tue, 23 Feb 2010 16:01:08 +0000 http://www.webcolordesign.com/?p=451 現在、背景色と文字色のコントラストについて調査を実施しております。

文字の読みやすさに関する調査

背景色と文字色の組み合わせで、読みやすいか読みにくいかを選んでいくだけの簡単なものなのですが、設問が多いため、自分で作っておきながら大変面倒くさいものとなっております。お忙しい中恐縮ですが、データを多く集めたいと考えておりますので、Web業界の方だけでなく、様々な方のご協力をお願いできればと思います。

なお、集まったデータを元にあれこれ考察をし、当サイトにて公開いたします。

アンケートは4月30日（金）までとさせていただきます。お忙しい方はTwitterでこんなアンケートがあるとつぶやいていただくだけでも構いませんので、どうぞよろしくお願いいたします。関連記事：

]]> http://www.webcolordesign.net/others/web%e3%81%ae%e9%85%8d%e8%89%b2%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e8%aa%bf%e6%9f%bb%e3%81%ae%e3%81%94%e5%8d%94%e5%8a%9b%e3%81%8a%e9%a1%98%e3%81%84%e3%81%97%e3%81%be%e3%81%99.html/feed 0 JIS X8341-3:2010における文字コントラストの達成基準 http://www.webcolordesign.net/color_point/jis_accesibility/jis-x8341-32009%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e6%96%87%e5%ad%97%e3%82%b3%e3%83%b3%e3%83%88%e3%83%a9%e3%82%b9%e3%83%88%e3%81%ae%e9%81%94%e6%88%90%e5%9f%ba%e6%ba%96-2.html http://www.webcolordesign.net/color_point/jis_accesibility/jis-x8341-32009%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e6%96%87%e5%ad%97%e3%82%b3%e3%83%b3%e3%83%88%e3%83%a9%e3%82%b9%e3%83%88%e3%81%ae%e9%81%94%e6%88%90%e5%9f%ba%e6%ba%96-2.html#comments Fri, 19 Feb 2010 04:21:26 +0000 http://www.webcolordesign.com/?p=449 2004年版と2010年版の違い

今年（2010年）に改訂されるとされるWeb JIS（JIS X8341-3:2010）の公開レビュー版を読みましたので、文字色について少し書いてみようと思います。正式版ではどうなるやらわかりませんが、大きく変わることもないでしょう。

と言うわけで公開レビュー版で出てきている内容は、W3Cが勧告したWeb Content Accessibility Guidelines（WCAG)2.0の内容と同じものになっております。各国で基準が異なるというのもおかしな話ですので、世界的な標準となるWCAG2.0に従ったというのは大変評価出来ることだと思います。

2004年版が「背景色と文字色で十分に明度差を付けなさい」とか「色だけで情報を区別せずに、文字情報と合わせて使いなさい」と言ったような、言ってみれば大雑把な指針が示されただけなのですが、今回の改訂で最も重要な部分として、きちんと数値化された達成基準が示されたことにあります。

文字コントラストの達成基準

今回の改訂では文字色の達成基準は文字コントラストによって示されています。では文字コントラストとは何かと言うことですが、以下の式で表されます。

コントラスト比 (L1 + 0.05) / (L2 + 0.05)

このL1は明るい方の色の相対輝度、L2は暗い方の相対輝度を表します。ではこの相対輝度はどのように計算されるかと言いますと、

相対輝度
L = 0.2126 * R + 0.7152 * G + 0.0722 * B

また新しいRGBという記号が出てきましたが、こちらについては、

  • if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
  • if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
  • if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

として定義されております。ついでにRsRGB、GsRGB、および BsRGB は

  • RsRGB = R8bit/255
  • GsRGB = G8bit/255
  • BsRGB = B8bit/255

このような式で計算されます。この計算結果は1:1～21:1の間の値を取るのですが、この比が4.5:1を超えていれば達成基準AAをクリア、7:1を超えていれば達成基準AAAをクリアしていることになります。

また大きいサイズの文字（半角英数字なら18あるいは14ポイント以上の太字、日本語のフォントであれば22あるいは18ポイント以上の太字）の場合には、達成基準AAを満たすためには3:1、達成基準AAAを満たすためには4.5:1というように、フォントのサイズによっても基準は変わってきます。

とは言え、このような複雑な計算を毎回やってられませんので、インフォアクシアさんが提供されているカラー・コントラスト・アナライザー 2.2 日本語版を利用することにしましょう。

実際の配色とコントラスト比

では背景色が白い場合のコントラスト比を実際に見てみましょう。12ptと18ptの文字を用意しました。背景色は#FFFFFFの白、文字色は#000000の黒から#111111、#222222のように順に明るくしていきます。

12ポイントの文字のコントラスト比
文字色 コントラスト比 達成基準AA 達成基準AAA
#000000 21:1 OK OK
#111111 18.9:1 OK OK
#222222 15.9:1 OK OK
#333333 12.6:1 OK OK
#444444 9.7:1 OK OK
#555555 7.5:1 OK OK
#666666 5.7:1 OK NG
#777777 4.5:1 OK NG
#888888 3.5:1 NG NG
#999999 2.8:1 NG NG
18ポイントの文字のコントラスト比
文字色 コントラスト比 達成基準AA 達成基準AAA
#000000 21:1 OK OK
#111111 18.9:1 OK OK
#222222 15.9:1 OK OK
#333333 12.6:1 OK OK
#444444 9.7:1 OK OK
#555555 7.5:1 OK OK
#666666 5.7:1 OK OK
#777777 4.5:1 OK OK
#888888 3.5:1 OK NG
#999999 2.8:1 NG NG

12ポイントの方では白（＃FFFFFF)の背景色に対し、文字色#777777までなら達成基準AAを、#555555までなら達成基準AAAもクリアすることが出来ます。次に大きなフォントとされる18ポイントの方では、#888888までで達成基準AAを、#777777までで達成基準AAAをクリアすることが出来ます。

もちろんフォントの形状などによっては、見やすさは変わってきますので、「最低限」とされるAAではなく、「より十分」なAAAを目指していくのがよいでしょう。また、この基準をクリアしたからと言って、読みやすいとは限りません。特に加減ぎりぎりになってくると、色相などによっても読みにくく感じてしまうでしょう。

背景色が#FFFFFFの白の場合に限って言えば、背景色と文字色との差が小さいほど柔らかい印象に見えますが、私の個人の主観としては、柔らかさを表現するために文字色を#666666以上の明るさにする必要を感じません。もしそれが必要なのであれば、その他の部分の色で表現することが可能だからです。

今回のJISの改訂は「こうした方がよい」と言うものではなく、「こうあるべきである」と言うことを示したものです。Webや色彩のプロフェッショナルがまず範を示し、広く世の中に知らしめるようにしたいものです。関連記事：

]]> http://www.webcolordesign.net/color_point/jis_accesibility/jis-x8341-32009%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e6%96%87%e5%ad%97%e3%82%b3%e3%83%b3%e3%83%88%e3%83%a9%e3%82%b9%e3%83%88%e3%81%ae%e9%81%94%e6%88%90%e5%9f%ba%e6%ba%96-2.html/feed 0 線の太さと色のコントラストから強調を考える http://www.webcolordesign.net/color_point/usability/%e9%9d%a2%e7%a9%8d%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e5%a4%89%e3%82%8f%e3%82%8b%e3%82%b3%e3%83%b3%e3%83%88%e3%83%a9%e3%82%b9%e3%83%88%e3%81%ab%e6%b3%a8%e6%84%8f%e3%81%99%e3%82%8b.html http://www.webcolordesign.net/color_point/usability/%e9%9d%a2%e7%a9%8d%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e5%a4%89%e3%82%8f%e3%82%8b%e3%82%b3%e3%83%b3%e3%83%88%e3%83%a9%e3%82%b9%e3%83%88%e3%81%ab%e6%b3%a8%e6%84%8f%e3%81%99%e3%82%8b.html#comments Sun, 14 Feb 2010 12:20:37 +0000 http://www.webcolordesign.com/?p=375 同じ色の組み合わせでも、サイズが異なればその組み合わせによる印象や機能が変わる場合があります。

色のサイズとコントラスト

色のサイズとコントラスト図は同じ2色の組み合わせを高さを変えて並べてみた例です。左から30ピクセル、10ピクセル、5ピクセル、2ピクセル、1ピクセルとなっています。理屈の上では、2色の差は変わらないのですが、右に行くほど2色の境界線はわかりにくくなっていきます。この現象は2色の彩度が低いほど顕著になります。2色の物理的な性質は左から右まで変わらないので、見え方の違いは見る側の人間の脳の働きによるものなのです。

思ったほど2色の差が出ないという例この見え方が問題になってくるのは、主に細い文字による表現においてです。表示するフォントのサイズにもよりますが、通常のテキスト部分で使われるサイズだと文字の線は太さが1ピクセルであることが多いでしょう。その際に強調やリンクなどの色を変えたときに、思ったほど色の差がないという場合が多いのです。単なる強調である場合には、文字は読めるわけなので、読み進める上での問題はないのですが、これが下線を取り外したリンクである場合には、クリックされないと困るような事態も生じます。そこで、下のように強調する方の色の彩度や明度を調整して、より目立たせるようにしなければなりません。

背景色を使った強調閲覧環境によっても、同じ色が様々な見え方になったりします。色の差で何か情報を伝えたいような場合には、あまり細いラインなどは使わないようにした方が無難でしょう。文字色ではなく、背景色を使って強調するのも、情報を区別する良い方法です。関連記事：

]]> http://www.webcolordesign.net/color_point/usability/%e9%9d%a2%e7%a9%8d%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e5%a4%89%e3%82%8f%e3%82%8b%e3%82%b3%e3%83%b3%e3%83%88%e3%83%a9%e3%82%b9%e3%83%88%e3%81%ab%e6%b3%a8%e6%84%8f%e3%81%99%e3%82%8b.html/feed 0