先日、Twitter上でブログの色についてつぶやいてみました。内容はこんな感じです。
- ブログの色について。検索などからブログにたどり着く場合、ヘッダだけ変えて目立たせた個人の無料ブログって、ものすごく記事に到達しにくい。この人の考えや意見を知りたいという強い意志がない場合には、ヘッダだけ目立ってるのはマイナス
- 既にリピーターになってる人には関係ない話なんだけども、そもそもリピーターにさせるためには内容の充実が必要なわけで、内容をよく知ってもらうためには、サイトの回遊性を高める色を選ぶことも重要。ヘッダ変えただけでは集客は無理だ
- と言うわけで、やっぱりコンテンツがよくないとどうにもならんなといういつもの話に落ちついた
とは言うものの、140字では多少言い足りない部分や、誤解を招きそうなところもあるので、もう一度整理してみようと思います。個人のブログで、特にビジネスにつながらなくても、好きなことが発信できればいいという場合には、どんな色でも構わないと思いますので、今回はビジネスブログに限った場合で考えてみましょう。
まずブログが読まれる場合には、大きく「その記事を読みたい」という場合と、「ある人の書いた記事を読みたい」という場合に分けて考えることが出来るかと思います。前者は検索エンジンやTwitter・ソーシャルブックマークなどで記事のタイトルなどを見て興味をひかれた場合、後者はその分野の第一人者や芸能人など誰が記事を書いたのかがその時点でわかっている場合ですね。
記事そのものに興味を持っての訪問の場合には、まず興味の対象は記事の内容です。そこで内容が良ければ、他のページの記事も読んでみたいと思うでしょうし、上手くいけばTwitterでフォローされたり、ブックマークなどもしてもらえるでしょう。このようにリピーターやフォロワーが増えればよいのですが、そのためには内容の充実というのが大前提になります。
リピーターを増やすためには、その時幸運にも読んでもらえた記事だけが見られればよいわけでもないでしょう。出来れば他の記事も読んでもらい、「この人の書いていることはおもしろい」や「なかなか勉強になるなぁ」などと感じてもらえるようにしなければなりません。
ああ、ここまでまったく色のことは書かれていません。そして書きようもありません。当たり前のことですが、1回目の訪問をしてもらうまでは、色なんて読者には関係ありません。つまりブログの色で訪問者数アップというのは、ただのファンタジーなのですね。
ただ訪問してもらってからということであれば、話はまったく別です。
どこからともなくやってきた読者は、そのブロガーの名前や経歴などは知らず、記事のタイトルの情報だけを持ってブログに到着します。そのような人に向けて、まず記事の部分に視線が向くように配色をする必要があります。
そして出来れば他の記事も読んでもらって、このサイトのリピーターになってもらいたいという希望を実現させるためには、サイト内の回遊性を高めるために、リンクなどがわかりやすい色を施す必要があるのです。
アメブロをはじめとする無料のブログサービスのテンプレートの中には、どう考えてもその人の記事よりも、各種サービスが大事なのではないかと思われる（運営側としてはおそらくそう）ものがたくさんありますので、テンプレートをそのまま使うには注意が必要かもしれません。
次に後者の著名人のブログなどでは、そもそもリピーターが多かったり、○○のブログのように内容より誰のブログかということで訪問されたりするので、上記のような配慮はしなくてもよいのかもしれませんが、それでも回遊性を高めるための工夫は必要ですね。
では、ヘッダのデザインなんかはどうでもいいのかというと、けしてそうではありません。サイトのユーザビリティとは別にブランディングとして重要になるわけです。
書いている人や内容をわかりやすいイメージで表現することで、より顧客になってくれそうなターゲットをひきつけてくれます。企業のブログではその企業の理念を表すコーポレートカラーが、個人のブログでは、その人をの人柄や考え方、文体などに合った色を表現することが重要でしょう。
まとめると、ブログに重要なのは内容の充実で、それを支えるための色・デザインが必要です。
逆に一番よろしくないのは、ヘッダなどのデザイン部分だけ派手に作って、内容がまったく充実していない場合ですね。顔出しまでして、内容がしょぼかったという印象が残るのだけは避けたいものです。
そしてせっかく訪問してくれた人がクライアント候補にさせるために、わかりやすいナビゲーションの配色にすることです。
ビジネスブログの色を真剣に考えるなら、コンテンツの充実度合いとデザイン・ユーザビリティを総合的に考えた方がよいでしょう。デザインだけ突出しているのはマイナス効果を生むこともあると考えています。
ビジネスブログの色については、大阪と東京のWebカラーセミナーでも少しお話ししようと思います。
企業サイトや個人事業主の方で、ブログの配色はこれでいいのかというお悩みをお持ちの方は、フォルトゥナでアドバイスも行っておりますので、ご相談ください。
当サイトで公開しております配色ツールの後継ツールとなる「ウェブ配色ツール Ver2.0」を公開しました。
今回のツールでは背景色の有無やロゴのテキスト・色に加え、メインビジュアルの変更にも対応しております。また配色一覧表も表示できるため、打ち合わせ等でも利用いただけると思います。
フィードバックをいただければ、バージョンアップの参考にさせていただきますので、何か気づいた点などがありましたら、お問い合わせいただければと思います。
「ウェブ配色ツール Ver2.0」は、当サイトではなくカラープランニングオフィス フォルトゥナのサイトに設置しておりますので、お間違えなきようよろしくお願いします。
ウェブサイトにおけるカラーコーディネーターの役割は、大きく2つに分かれます。それは企画段階におけるカラーマーケティングです。そしてデザイン時における確認と最終調整です。実はこの2つは同じ色を扱う作業でも、まったく異なる事を行うのです。
まずはカラーマーケティングの部分ですが、サイトの目的を踏まえ、使うべきロゴ（ない場合には提案）の色や競合サイトの調査に基づく使用色の提案です。例えば水を使う企業では当然青系の水をイメージさせる色を使いたいはずですが、競合サイトと似すぎていると、比較された時に見劣りする場合があります。これは単にデザインが見劣りするという意味でなく、後発の企業（特に無名の企業の場合）には、真似されたと感じられることも少なくありません。
だからと言って、水のイメージなのにオレンジをメインで使おうというのもおかしな話です。このバランスを考えながら、どのような色合いにすれば、印象に残りやすいかを考えることも重要です。これを考える際には、実店舗が存在するかどうか、あるとすればその近隣にはどのような競合があるのかも調べなければなりません。
もう一つのデザインの確認と調整は、カラーマーケティングから導き出された配色がきちんとデザインに反映されているかどうかに加え、最終段階で重要なのはユーザビリティとアクセシビリティの確保です。
これは実際にデザイナーが色を付けてみないとわからないことも多いのです。ワイヤフレームだけでは、リンク色や見出しと本文の関係、ナビゲーションの認識しやすさなどはわからないので、情報をいかに伝達するかを考えれば、配色案を決めたらそれで終わりというわけにはいきません。（だが、そのようなカラーコーディネーターも多いです・・・） また特定の人にとって使いにくいような配色では、操作や閲覧が困難という理由で帰られてしまうかもしれません。色によって、無用な機会損失も生まれてしまうのです。
サイトリニューアルなどでは、情報をスムーズに流れるようにするだけで、1人辺りのページビューは落ちても、問い合わせ率が上がることもあります。これはわかりにくさがなくなり、目的のページへ到達しやすくなったことを表します。色の効果はきれいに見せるだけではないのです。
カラーコーディネーターは、SEOなどのサイトを訪問するまでの手段にはまったく手を出すことも出来ませんし、きちんとしたサイトが構築されていなかったり、商品や情報が魅力的なものでなければ、いかに色でごまかそうとしても消費者には見抜かれてしまうでしょう。
言い換えれば、有益なコンテンツやよい商品が持つ力を、スムーズな形で伝え、そのビジネスに貢献することが、カラーコーディネーターの最重要の課題となります。カラーマーケティングだけ出来ていてもサイトとしては不十分ですし、インターフェースなどの機能面だけが充実していてもサイトの効果は下がってしまいます。
例えるならば、カラーコーディネーターの仕事は、作戦立案における参謀（プロデューサー・ディレクターの補助をしてカラーマーケティング）と実践面における後方支援・整備（色彩実装の確認）のまったく異なる仕事を行う必要があるのです。しかし、いずれにしても、いかにサイトを訪問したユーザーの印象に残し、ストレスを感じさせない色を作り上げるかが腕の見せ所と言えるでしょう。
SEOなどの訪問数を上げる施策はもちろん重要ですが、訪問されてからどのように問い合わせ・購入につなげるかも重要ですし、そこには色が何らかの貢献が出来るはずだと考えています。
と、そんなことを踏まえながら9月28日（火）のウェブカラーセミナーで話そうかと思っています。
« 隠す
文字の読みやすさに関しての調査結果を「アンケートの集計結果1（生データ）」「アンケートの設問について」「アンケートの集計結果に対する感想」の3つのエントリーに書いてきましたが、今回はそれらのまとめとなります。回答の数字だけでなく、いただいたご意見などもまとめて、読みやすさに関してまとめてみました。
- WCAG2.0のコントラスト比の基準はまず妥当。ただし、高彩度色を使う場合には、よみにくくなる場合もある。
- 一般的にはコントラスト比が高い方が読みやすいという事実に変わりはない。ただし、同じ2色で文字色と背景色を入れ替えただけでも、読みやすさが変わる。
- 膨張色の効果が出ているのか、文字色の方が明るい方が読みやすいという傾向がある。ただし、長文ではこの限りではない。
- コントラスト比が高くても、背景色が高彩度色である場合には、読みにくいと感じられる場合が多い。
- 高彩度の赤・緑が入ってくると、コントラスト比に関わらず、読みにくいという割合が増える。
- 彩度差が低めとなるためか、有彩色同士の組み合わせは減点傾向のため、レベルAAクリアではやや不足。
アンケートでは好みの差も含まれていますが、大きくこのような傾向が出ていると思われます。
このような結果から、以下のように提言させていただきます。
- 文字の背景色は見出しやボタン、文章内の一部の強調のような短めの文章が望ましい。
- 逆に長文を読ませたいなら、白あるいは薄い灰色の背景色に、黒か濃い灰色の文字。
- コントラストが高いのが望ましいが、背景色が高彩度色になる場合には、明度・彩度をやや落とすのが望ましい。
- 文字は小さくなるほど読みにくくなるので、よりコントラストに気を遣うようにする。
あくまでご参考に。
« 隠す
回答の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となっています。
ただし背景色が緑色の場合に、とても「読みやすい」と「読みやすい」が大変多くなっているのが特徴です。同じコントラスト比でかなり差が出ているのがおもしろい結果となりました。この辺りも要検討でしょう。
« 隠す
調査結果の考察に入る前にまずはいただいたご意見を踏まえて、どのような基準で設問を作ったかを説明したいと思います。
今回の調査では、条件付けはほとんどせず、テキストは「コントラスト比と読みやすさ」としました。今にして思えば配色と全然関係ない言葉でもよかったようにも思いますが、気づいたときにはいくつか回答をいただいておりましたので、やむを得ずそのままにしておりました。
背景色が全面に大きく使われている場合には、当然回答も変わってくるかと思います。短い文章にしたのは、見出しに使用する場合を想定したからです。これは背景色が全面に施されるよりも、見出しなどの一部に使われることが多いというところからです。もちろん今回の例のようなサイズだと見えやすい場合でも、全面に使えば見えにくいと感じることも多々あるかと思いますが、逆にこのサイズでも見えにくいものは、大きく使っても見えにくいと思います。
そして色の問題ですので、個人の好みの差が出るはずですが、そこまで考えていくと、ただでさえ多い設問や選択肢がもっと増えていくので、今回は大雑把な方向のようなものがわかればよいと考えています。
またいくつかの組み合わせを除いては、実際にウェブ上で見かけた配色を使っています。気づかれた方も多いと思いますが、設問1～25と設問26～50は同じ色の組み合わせを反転させたものになっています。WCAG1.0の色差・明度差やWCAG2.0のコントラスト比はあくまで、2色の差だけに着目した基準ですが、「実際にはどちらを背景にするかによって、感じ方に差が出るのではないか」という仮説を立てて設問を作った結果、全部で50問という数になってしまいました。長いアンケートに最後までお付き合いいただいた方には心から感謝いたします。
フォントによっても読みやすさが変わるのはご意見をいただいたとおりです。メイリオフォントという例を挙げていただきましたが、フォントが大きくなる、太くなるということは、文字の各部が太くなりますので、その分コントラストが出やすくなるので、読みやすくなるはずです。OSやブラウザによってもフォントは変わりますし、アンチエイリアスの掛かり方も変わりますし、モニターによって見え方が異なるのも当然です。またそれぞれが設定をカスタマイズしていることも考えられますので、今回はアンチエイリアスなしの18ポイントの「MS P ゴシック」ということで、画像を作りました。
« 隠す
アンケートの生データ
2010年2月19日から4月30日のかけて、文字の読みやすさに関するアンケートを実施し、98名の方の回答をいただきました。ご協力ありがとうございました。考察は後ほど加えるとしまして、まずは結果の生データを公開しておきます。
質問は「この色の組み合わせは読みやすいですか？」とだけ記し、特に条件などは設けておりません。異なる背景と文字の組み合わせを読んでもらい、それぞれを「とても読みやすい」「やや読みやすい」「どちらでもない」「やや読みにくい」「とても読みにくい」「まったく読めない」の6段階で分類していただきました。
現在、背景色と文字色のコントラストについて調査を実施しております。
文字の読みやすさに関する調査
背景色と文字色の組み合わせで、読みやすいか読みにくいかを選んでいくだけの簡単なものなのですが、設問が多いため、自分で作っておきながら大変面倒くさいものとなっております。お忙しい中恐縮ですが、データを多く集めたいと考えておりますので、Web業界の方だけでなく、様々な方のご協力をお願いできればと思います。
なお、集まったデータを元にあれこれ考察をし、当サイトにて公開いたします。
アンケートは4月30日（金）までとさせていただきます。お忙しい方はTwitterでこんなアンケートがあるとつぶやいていただくだけでも構いませんので、どうぞよろしくお願いいたします。
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や色彩のプロフェッショナルがまず範を示し、広く世の中に知らしめるようにしたいものです。
« 隠す
同じ色の組み合わせでも、サイズが異なればその組み合わせによる印象や機能が変わる場合があります。
色のサイズとコントラスト
図は同じ2色の組み合わせを高さを変えて並べてみた例です。左から30ピクセル、10ピクセル、5ピクセル、2ピクセル、1ピクセルとなっています。理屈の上では、2色の差は変わらないのですが、右に行くほど2色の境界線はわかりにくくなっていきます。この現象は2色の彩度が低いほど顕著になります。2色の物理的な性質は左から右まで変わらないので、見え方の違いは見る側の人間の脳の働きによるものなのです。
この見え方が問題になってくるのは、主に細い文字による表現においてです。表示するフォントのサイズにもよりますが、通常のテキスト部分で使われるサイズだと文字の線は太さが1ピクセルであることが多いでしょう。その際に強調やリンクなどの色を変えたときに、思ったほど色の差がないという場合が多いのです。単なる強調である場合には、文字は読めるわけなので、読み進める上での問題はないのですが、これが下線を取り外したリンクである場合には、クリックされないと困るような事態も生じます。そこで、下のように強調する方の色の彩度や明度を調整して、より目立たせるようにしなければなりません。
閲覧環境によっても、同じ色が様々な見え方になったりします。色の差で何か情報を伝えたいような場合には、あまり細いラインなどは使わないようにした方が無難でしょう。文字色ではなく、背景色を使って強調するのも、情報を区別する良い方法です。
« 隠す
Page 1 of 912345»...Last »
▲このページの先頭に戻る
当サイトで公開しております配色ツールの後継ツールとなる「ウェブ配色ツール Ver2.0」を公開しました。
