ウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイト
ウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイト
ウェブサイトのカラーコーディネートを専門とするカラーコーディネーター坂本邦夫が、読みやすく使いやすいホームページの配色についての記事を公開しているサイトです。
色彩の基礎知識から、配色の作り方、競合サイトとの色の比較方法や色のアクセシビリティまで、一通りの配色知識を学ぶことが出来ます。また、最新の情報や成果などもここで発表していきます。
文字の読みやすさに関しての調査結果を「アンケートの集計結果1（生データ）」「アンケートの設問について」「アンケートの集計結果に対する感想」の3つのエントリーに書いてきましたが、今回はそれらのまとめとなります。回答の数字だけでなく、いただいたご意見などもまとめて、読みやすさに関してまとめてみました。
アンケートでは好みの差も含まれていますが、大きくこのような傾向が出ていると思われます。
このような結果から、以下のように提言させていただきます。
あくまでご参考に。
投稿日時: 2010年06月15日 14時29分
カテゴリー： 文字の読みやすさに関する調査 | コメントはまだありません »
タグ： 可読性, 視認性, 調査
回答の2色がWCAG2.0のコントラスト比とWCAG1.0の色差・明度差をクリアしているかどうかの判定をし、同じ色の組み合わせを反転させたときの回答を比較して、感想を書いてみました。詳しい考察ではなく、私の主観と推測ですのでご注意ください。
WCAG2.0のコントラスト比達成基準は、
」となっております。今回のアンケートでは18ポイントの文字を使っておりますので、「大きい文字」の基準で判定しております。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 10 | 31 |
| やや読みやすい | 41 | 44 |
| どちらでもない | 19 | 19 |
| やや読みにくい | 25 | 3 |
| とても読みにくい | 2 | 0 |
| まったく読めない | 0 | 0 |
WCAG2.0のコントラスト比はレベルAAAをクリアしていますが、WCAG1.0の方では明度差のみのクリアとなっております。
背景色が暗い方が、全般的にやや読みやすいという結果となりました。いただいたコメントにもありましたが、同じ色の組み合わせでも読みやすさが変わるということのようです。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 4 | 23 |
| やや読みやすい | 13 | 38 |
| どちらでもない | 18 | 22 |
| やや読みにくい | 56 | 13 |
| とても読みにくい | 6 | 1 |
| まったく読めない | 0 | 0 |
こちらはどの基準も達成していないのですが、背景色が暗い方が読みやすいという結果が出ています。
もしかすると文字が白であることで、膨張色の効果で文字が太く見えることが関連しているのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 27 | 20 |
| やや読みやすい | 32 | 29 |
| どちらでもない | 14 | 24 |
| やや読みにくい | 21 | 22 |
| とても読みにくい | 3 | 2 |
| まったく読めない | 0 | 0 |
こちらはコントラストは十分の組み合わせですが、比較的結果はばらけています。
読みやすさとは別に色の好みが結果に表れているのかもしれません。基準値をクリアしていればよいということではないようです。
今回の調査では短めの文章ですが、背景色と文字色が入れ替わってもあまり差は出ていませんが、長文になればより差が出てくる気もします。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 5 | 7 |
| やや読みやすい | 21 | 24 |
| どちらでもない | 29 | 25 |
| やや読みにくい | 36 | 39 |
| とても読みにくい | 6 | 2 |
| まったく読めない | 0 | 0 |
WCAG2.0のコントラスト比はレベルAA、WCAG1.0の方は明度差のみのクリアとなっています。
読めないことはないが、好きこのんで読みたくないというところでしょうか。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 50 | 56 |
| やや読みやすい | 31 | 33 |
| どちらでもない | 11 | 7 |
| やや読みにくい | 5 | 1 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
基準値は全てクリアしています。正直なところ、この組み合わせを否定されたらどうしようもないというところです。
背景色が白の方がやや読みやすいという結果ですが、この辺りは好みなどの誤差の範囲かと考えています。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 0 | 0 |
| やや読みやすい | 2 | 6 |
| どちらでもない | 6 | 9 |
| やや読みにくい | 30 | 59 |
| とても読みにくい | 58 | 23 |
| まったく読めない | 1 | 0 |
どれも基準値にはるかに及ばない数字になっています。これだけ読みにくい人が多いということは、避けた方がよい配色でしょう。
まったく読めないという回答も一人ありました。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 74 | 46 |
| やや読みやすい | 19 | 36 |
| どちらでもない | 3 | 8 |
| やや読みにくい | 1 | 7 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
こちらも基準値ははるかに超えており、かなり多くの方が読みやすいという方向で回答されています。
設問5と30の組み合わせに非常に近い色ですが、ややコントラストが高くなっています。背景が薄いグレーになっている方が、「圧倒的にとても読みやすい」という回答が多いという結果になっているのがおもしろいところです。どのような理由から来るものなのか考えてみるべき場所かもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 1 | 0 |
| やや読みやすい | 2 | 1 |
| どちらでもない | 2 | 0 |
| やや読みにくい | 17 | 5 |
| とても読みにくい | 71 | 66 |
| まったく読めない | 4 | 25 |
およそ読みにくいことが想像される、推奨されない組み合わせの代表的な例ですが、背景色が赤い方が全く読めないという方が非常に多くなっているのが興味深い点です。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 5 | 5 |
| やや読みやすい | 32 | 25 |
| どちらでもない | 28 | 25 |
| やや読みにくい | 29 | 34 |
| とても読みにくい | 3 | 8 |
| まったく読めない | 0 | 0 |
コントラスト比がぎりぎり基準に満たないという数字でこの結果が出ておりますので、この規格はある程度妥当な基準値が設定してあるなと感じました。
実はこの組み合わせも全ての基準をクリアしていない組み合わせになっています。好みが出ているのかもしれませんが、「やや読みやすい」「とても読みやすい」の方がかなり多いという結果となっています。
設問10と設問35
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 19 | 41 |
| やや読みやすい | 25 | 35 |
| どちらでもない | 17 | 17 |
| やや読みにくい | 28 | 4 |
| とても読みにくい | 8 | 0 |
| まったく読めない | 0 | 0 |
WCAG2.0のコントラスト比がレベルAAとなっており、1.0の方では両方クリアしています。
ですが、赤い背景の方が読みにくいという方がかなり多いようです。文字は白ですので、膨張色の効果も期待できそうですが、それ以上に読みにくい要因があるのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 29 | 9 |
| やや読みやすい | 34 | 22 |
| どちらでもない | 14 | 15 |
| やや読みにくい | 18 | 42 |
| とても読みにくい | 2 | 0 |
| まったく読めない | 0 | 0 |
コントラスト比は9.2:1とかなり高い数字になっているのですが、色差・明度差とも基準値に達していません。
こちらは緑背景の方が、圧倒的に読みにくい割合が増えています。彩度の高すぎる背景色は好まれないのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 61 | 27 |
| やや読みやすい | 28 | 31 |
| どちらでもない | 5 | 17 |
| やや読みにくい | 3 | 20 |
| とても読みにくい | 0 | 2 |
| まったく読めない | 0 | 0 |
こちらはコントラスト比が十分で、リンク色に使われているのも納得の組み合わせです。
ただし背景色が青い場合には、とても読みやすいという比率はかなり下がります。やはり高彩度の背景色はあまり好まれていないようです。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 2 | 1 |
| やや読みやすい | 4 | 3 |
| どちらでもない | 14 | 8 |
| やや読みにくい | 52 | 48 |
| とても読みにくい | 25 | 36 |
| まったく読めない | 0 | 1 |
こちらもいずれの基準値も満たさないかなり読みにくい組み合わせです。
オレンジの背景色をとても読みにくいとされた方が多めになっています。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 19 | 19 |
| やや読みやすい | 30 | 30 |
| どちらでもない | 17 | 20 |
| やや読みにくい | 27 | 23 |
| とても読みにくい | 4 | 5 |
| まったく読めない | 0 | 0 |
いずれの基準値も満たす、コントラスト十分の組み合わせですが、やや読みにくいと判断された方がかなり多くなっています。
補色に近い配色になりますので、数値以上にコントラストが強いと感じられるのかもしれません。青背景に黄文字の分布は、設問37の青背景に白文字とそれほど変わりませんが、黄色背景に青文字は、設問36の白背景に青文字よりもずっと読みにくいという結果になります。
読みやすさに背景色の彩度がかなり関連性があることを示唆しているように思えます。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 52 | 37 |
| やや読みやすい | 40 | 36 |
| どちらでもない | 5 | 18 |
| やや読みにくい | 0 | 6 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
この組み合わせもコントラストは十分の組み合わせです。
白背景の方がやや読みやすいという傾向が出ていますが、茶背景の方もなかなか読みやすいようです。
白文字は膨張色の効果が出るのではないかという仮説をさっき書きましたが、ここではあまり感じられません。あるいは他の要因があるのでしょうか。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 5 | 3 |
| やや読みやすい | 24 | 16 |
| どちらでもない | 31 | 21 |
| やや読みにくい | 32 | 44 |
| とても読みにくい | 5 | 13 |
| まったく読めない | 0 | 0 |
コントラスト比はレベルAAをクリアしていますので、読めないことはないという基準の組み合わせになります。ただし、WCAG1.0の方では基準値にまったく届いていません。
「とても読みやすい」という方もいらっしゃいますが、読みにくいという方も多いので、これもWCAG2.0のコントラスト比がそれなりに妥当であるという印象を受けます。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 27 | 24 |
| やや読みやすい | 37 | 34 |
| どちらでもない | 16 | 22 |
| やや読みにくい | 14 | 15 |
| とても読みにくい | 3 | 2 |
| まったく読めない | 0 | 0 |
WCAG1.0の色差だけ基準を満たしていないのですが、それもわずかなことです。色の組み合わせが変わってもそれほど結果に差はありません。
この組み合わせも好みの差が出ているのかもしれませんが、高彩度色の組み合わせの中では、比較的無難な結果となっています。ただし積極的に使いたいという組み合わせでもありません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 45 | 36 |
| やや読みやすい | 40 | 43 |
| どちらでもない | 11 | 15 |
| やや読みにくい | 1 | 2 |
| とても読みにくい | 0 | 1 |
| まったく読めない | 0 | 0 |
いずれの基準も満たす組み合わせで、概ね読みやすいという評価をしていいかと思います。
背景色が青緑の方が、「とても読みやすい」が減っていることについては、検討が必要でしょう。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 8 | 1 |
| やや読みやすい | 25 | 8 |
| どちらでもない | 15 | 18 |
| やや読みにくい | 38 | 40 |
| とても読みにくい | 9 | 28 |
| まったく読めない | 2 | 2 |
WCAG2.0のコントラスト比はクリアしていますが、色差・明度差とも基準には遠く及びません。どちらかというと読みにくいという人の方が多い組み合わせであることに要注意です。
設問10と35の時は文字が白でしたが、背景色が鮮やかな赤の場合には、読みにくさが増すようです。アクセントとして非常に重要な色なので、使い方に気をつける必要がありそうです。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 30 | 29 |
| やや読みやすい | 51 | 31 |
| どちらでもない | 13 | 22 |
| やや読みにくい | 3 | 14 |
| とても読みにくい | 0 | 1 |
| まったく読めない | 0 | 0 |
どの基準値をクリアする配色です。訪問済みのリンク色として使わることにも納得出来ます。
この紫は比較的彩度が高いせいか、背景色になった場合には読みにくくなるのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 42 | 38 |
| やや読みやすい | 37 | 39 |
| どちらでもない | 14 | 17 |
| やや読みにくい | 4 | 3 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
この組み合わせもよく使われる組み合わせですが、色差だけはクリアしておりません。
設問5と30の組み合わせに比べると、ややコントラストが低い組み合わせとなっていますが、「とても読みやすい」の比率はやや下がっています。この例のように短い文章である場合には、やや物足りないコントラストなのかもしれませんが、長文の場合にはどうかというのは今度の研究課題でしょう。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 5 | 7 |
| やや読みやすい | 23 | 21 |
| どちらでもない | 30 | 25 |
| やや読みにくい | 36 | 40 |
| とても読みにくい | 3 | 4 |
| まったく読めない | 0 | 0 |
いずれの基準にも満たない組み合わせで、背景色と文字色を入れ替えても結果に差は出ませんでした。私の主観ではあらためて2つ並べてみると、オレンジが背景の方が見えやすいように感じました。皆さんの環境ではいかがでしょうか？
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 9 | 2 |
| やや読みやすい | 30 | 15 |
| どちらでもない | 35 | 30 |
| やや読みにくい | 20 | 45 |
| とても読みにくい | 3 | 5 |
| まったく読めない | 0 | 0 |
これもコントラスト比はかろうじてクリアしているという数値になっています。この付近の数値の場合、「どちらでもない」を中心に「やや読みやすい」と「やや読みにくい」の両方が出てくるように思います。
そのような意味で、WCAG2.0のコントラスト比のレベルAAという基準は、最低限読めるけれども、やや物足りないという位置づけが出来るのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 18 | 16 |
| やや読みやすい | 50 | 38 |
| どちらでもない | 25 | 24 |
| やや読みにくい | 4 | 17 |
| とても読みにくい | 0 | 2 |
| まったく読めない | 0 | 0 |
色差以外は基準値をクリアしています。
ただし背景色が暗い場合には、「やや読みにくい」という数字が増えています。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 41 | 18 |
| やや読みやすい | 38 | 43 |
| どちらでもない | 17 | 23 |
| やや読みにくい | 1 | 13 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
上の設問24と49と同様に、色差以外はクリアしている例で、コントラスト比は4.5:1となっています。
ただし背景色が緑色の場合に、とても「読みやすい」と「読みやすい」が大変多くなっているのが特徴です。同じコントラスト比でかなり差が出ているのがおもしろい結果となりました。この辺りも要検討でしょう。
投稿日時: 2010年05月18日 19時45分
カテゴリー： 文字の読みやすさに関する調査 | 2件のコメント »
タグ： 可読性, 視認性, 調査
調査結果の考察に入る前にまずはいただいたご意見を踏まえて、どのような基準で設問を作ったかを説明したいと思います。
今回の調査では、条件付けはほとんどせず、テキストは「コントラスト比と読みやすさ」としました。今にして思えば配色と全然関係ない言葉でもよかったようにも思いますが、気づいたときにはいくつか回答をいただいておりましたので、やむを得ずそのままにしておりました。
背景色が全面に大きく使われている場合には、当然回答も変わってくるかと思います。短い文章にしたのは、見出しに使用する場合を想定したからです。これは背景色が全面に施されるよりも、見出しなどの一部に使われることが多いというところからです。もちろん今回の例のようなサイズだと見えやすい場合でも、全面に使えば見えにくいと感じることも多々あるかと思いますが、逆にこのサイズでも見えにくいものは、大きく使っても見えにくいと思います。
そして色の問題ですので、個人の好みの差が出るはずですが、そこまで考えていくと、ただでさえ多い設問や選択肢がもっと増えていくので、今回は大雑把な方向のようなものがわかればよいと考えています。
またいくつかの組み合わせを除いては、実際にウェブ上で見かけた配色を使っています。気づかれた方も多いと思いますが、設問1～25と設問26～50は同じ色の組み合わせを反転させたものになっています。WCAG1.0の色差・明度差やWCAG2.0のコントラスト比はあくまで、2色の差だけに着目した基準ですが、「実際にはどちらを背景にするかによって、感じ方に差が出るのではないか」という仮説を立てて設問を作った結果、全部で50問という数になってしまいました。長いアンケートに最後までお付き合いいただいた方には心から感謝いたします。
フォントによっても読みやすさが変わるのはご意見をいただいたとおりです。メイリオフォントという例を挙げていただきましたが、フォントが大きくなる、太くなるということは、文字の各部が太くなりますので、その分コントラストが出やすくなるので、読みやすくなるはずです。OSやブラウザによってもフォントは変わりますし、アンチエイリアスの掛かり方も変わりますし、モニターによって見え方が異なるのも当然です。またそれぞれが設定をカスタマイズしていることも考えられますので、今回はアンチエイリアスなしの18ポイントの「MS P ゴシック」ということで、画像を作りました。
投稿日時: 2010年05月18日 18時22分
カテゴリー： 文字の読みやすさに関する調査 | 1件のコメント »
タグ： 可読性, 視認性, 調査
2010年2月19日から4月30日のかけて、文字の読みやすさに関するアンケートを実施し、98名の方の回答をいただきました。ご協力ありがとうございました。考察は後ほど加えるとしまして、まずは結果の生データを公開しておきます。
質問は「この色の組み合わせは読みやすいですか？」とだけ記し、特に条件などは設けておりません。異なる背景と文字の組み合わせを読んでもらい、それぞれを「とても読みやすい」「やや読みやすい」「どちらでもない」「やや読みにくい」「とても読みにくい」「まったく読めない」の6段階で分類していただきました。
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 10 |  |
| やや読みやすい | 41 | |
| どちらでもない | 19 | |
| やや読みにくい | 25 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 4 | |
| やや読みやすい | 13 | |
| どちらでもない | 18 | |
| やや読みにくい | 56 | |
| とても読みにくい | 6 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 27 | |
| やや読みやすい | 32 | |
| どちらでもない | 14 | |
| やや読みにくい | 21 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 21 | |
| どちらでもない | 29 | |
| やや読みにくい | 36 | |
| とても読みにくい | 6 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 50 | |
| やや読みやすい | 31 | |
| どちらでもない | 11 | |
| やや読みにくい | 5 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 0 | |
| やや読みやすい | 2 | |
| どちらでもない | 6 | |
| やや読みにくい | 30 | |
| とても読みにくい | 58 | |
| まったく読めない | 1 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 74 | |
| やや読みやすい | 19 | |
| どちらでもない | 3 | |
| やや読みにくい | 1 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 1 | |
| やや読みやすい | 2 | |
| どちらでもない | 2 | |
| やや読みにくい | 17 | |
| とても読みにくい | 71 | |
| まったく読めない | 4 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 32 | |
| どちらでもない | 28 | |
| やや読みにくい | 29 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 19 | |
| やや読みやすい | 25 | |
| どちらでもない | 17 | |
| やや読みにくい | 28 | |
| とても読みにくい | 8 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 29 | |
| やや読みやすい | 34 | |
| どちらでもない | 14 | |
| やや読みにくい | 18 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 61 | |
| やや読みやすい | 28 | |
| どちらでもない | 5 | |
| やや読みにくい | 3 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 2 | |
| やや読みやすい | 4 | |
| どちらでもない | 14 | |
| やや読みにくい | 52 | |
| とても読みにくい | 25 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 19 | |
| やや読みやすい | 30 | |
| どちらでもない | 17 | |
| やや読みにくい | 27 | |
| とても読みにくい | 4 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 52 | |
| やや読みやすい | 40 | |
| どちらでもない | 5 | |
| やや読みにくい | 0 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 24 | |
| どちらでもない | 31 | |
| やや読みにくい | 32 | |
| とても読みにくい | 5 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 27 | |
| やや読みやすい | 37 | |
| どちらでもない | 16 | |
| やや読みにくい | 14 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 45 | |
| やや読みやすい | 40 | |
| どちらでもない | 11 | |
| やや読みにくい | 1 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 8 | |
| やや読みやすい | 25 | |
| どちらでもない | 15 | |
| やや読みにくい | 38 | |
| とても読みにくい | 9 | |
| まったく読めない | 2 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 30 | |
| やや読みやすい | 51 | |
| どちらでもない | 13 | |
| やや読みにくい | 3 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 42 | |
| やや読みやすい | 37 | |
| どちらでもない | 14 | |
| やや読みにくい | 4 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 23 | |
| どちらでもない | 30 | |
| やや読みにくい | 36 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 9 | |
| やや読みやすい | 30 | |
| どちらでもない | 35 | |
| やや読みにくい | 20 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 18 | |
| やや読みやすい | 50 | |
| どちらでもない | 25 | |
| やや読みにくい | 4 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 41 | |
| やや読みやすい | 38 | |
| どちらでもない | 17 | |
| やや読みにくい | 1 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 31 | |
| やや読みやすい | 44 | |
| どちらでもない | 19 | |
| やや読みにくい | 3 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 23 | |
| やや読みやすい | 38 | |
| どちらでもない | 22 | |
| やや読みにくい | 13 | |
| とても読みにくい | 1 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 20 | |
| やや読みやすい | 29 | |
| どちらでもない | 24 | |
| やや読みにくい | 22 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 7 | |
| やや読みやすい | 24 | |
| どちらでもない | 25 | |
| やや読みにくい | 39 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 56 | |
| やや読みやすい | 33 | |
| どちらでもない | 7 | |
| やや読みにくい | 1 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 0 | |
| やや読みやすい | 6 | |
| どちらでもない | 9 | |
| やや読みにくい | 59 | |
| とても読みにくい | 23 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 46 | |
| やや読みやすい | 36 | |
| どちらでもない | 8 | |
| やや読みにくい | 7 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 0 | |
| やや読みやすい | 1 | |
| どちらでもない | 0 | |
| やや読みにくい | 5 | |
| とても読みにくい | 66 | |
| まったく読めない | 25 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 25 | |
| どちらでもない | 25 | |
| やや読みにくい | 34 | |
| とても読みにくい | 8 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 41 | |
| やや読みやすい | 35 | |
| どちらでもない | 17 | |
| やや読みにくい | 4 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 9 | |
| やや読みやすい | 22 | |
| どちらでもない | 15 | |
| やや読みにくい | 42 | |
| とても読みにくい | 9 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 27 | |
| やや読みやすい | 31 | |
| どちらでもない | 17 | |
| やや読みにくい | 20 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 1 | |
| やや読みやすい | 3 | |
| どちらでもない | 8 | |
| やや読みにくい | 48 | |
| とても読みにくい | 36 | |
| まったく読めない | 1 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 19 | |
| やや読みやすい | 30 | |
| どちらでもない | 20 | |
| やや読みにくい | 23 | |
| とても読みにくい | 5 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 37 | |
| やや読みやすい | 36 | |
| どちらでもない | 18 | |
| やや読みにくい | 6 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 3 | |
| やや読みやすい | 16 | |
| どちらでもない | 21 | |
| やや読みにくい | 44 | |
| とても読みにくい | 13 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 24 | |
| やや読みやすい | 34 | |
| どちらでもない | 22 | |
| やや読みにくい | 15 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 36 | |
| やや読みやすい | 43 | |
| どちらでもない | 15 | |
| やや読みにくい | 2 | |
| とても読みにくい | 1 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 1 | |
| やや読みやすい | 8 | |
| どちらでもない | 18 | |
| やや読みにくい | 40 | |
| とても読みにくい | 28 | |
| まったく読めない | 2 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 29 | |
| やや読みやすい | 31 | |
| どちらでもない | 22 | |
| やや読みにくい | 14 | |
| とても読みにくい | 1 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 38 | |
| やや読みやすい | 39 | |
| どちらでもない | 17 | |
| やや読みにくい | 3 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 7 | |
| やや読みやすい | 21 | |
| どちらでもない | 25 | |
| やや読みにくい | 40 | |
| とても読みにくい | 4 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 2 | |
| やや読みやすい | 15 | |
| どちらでもない | 30 | |
| やや読みにくい | 45 | |
| とても読みにくい | 5 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 16 | |
| やや読みやすい | 38 | |
| どちらでもない | 24 | |
| やや読みにくい | 17 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 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 | |
投稿日時: 2010年05月02日 15時22分
カテゴリー： 文字の読みやすさに関する調査 | コメントはまだありません »
タグ： 可読性, 視認性, 調査
今年（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のように順に明るくしていきます。
| 文字色 | コントラスト比 | 達成基準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 |
| 文字色 | コントラスト比 | 達成基準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や色彩のプロフェッショナルがまず範を示し、広く世の中に知らしめるようにしたいものです。
投稿日時: 2010年02月19日 13時21分
カテゴリー： JIS規格への対応 | コメントはまだありません »
タグ： JIS X8341-3, アクセシビリティ, 可読性
背景色を変えることによって生じるリンク色の変更のデメリットについて説明しております。
通常、未訪問のリンクは青で訪問済みのリンクは赤紫、となっております。背景色が明るい場合にはそれほど神経質になることはありませんが、暗い場合にはテキストの色を変える必要が出てきます。
またリンク色が読めなくなる場合が多く、変更の必要が出てきますが、リンクの青色を黄色などに変更すると、そこがリンクと認識しにくくなります。そのような場合にはテキストのリンクを使わず、ボタンなどにしてリンクであることをはっきりさせておかないと操作性が格段に落ちることとなります。
このような理由からリンク色については少なくとも色相を大きく動かすことは避けた方がよいでしょう。黄色や緑などにしてしまうと、リンクと通常のテキストとの区別が付きにくくなります。少なくともリンクの下線をスタイルシートで取り去るようなことは避けるようにしましょう。
ただし元のままの青をそのまま用いた場合、彩度、明度ともに高すぎ、Windowsでブラウン管のモニターをお使いの方にはまぶしく見えることもあります。その場合には明度や彩度を落として微調整のみ行うことにします。
背景色を使う場合の文字の読みやすさとその重要性を説明しております。
基本的には背景色を使うことと文字の色を変えるのは見出しなど特別な場合を除いては変えることはお勧めしません。これは文字が読みにくいことで来訪者が帰ってしまうことを防ぐと共に、誰にでも使いやすいホームページを目指すことでビジネスの機会損失を減らすことも目的としております。
色覚障害者は日本人男性の5%、女性では0.2%と言われ300万人以上の方が程度の差はあれ、色覚に障害を持っていると言われております。また白内障については60歳代では70%以上で水晶体の白濁が見られるそうです。
合計すると1000万人を軽く超えることは明らかで、今後高齢化社会が進行するにあたっては、文字の読みやすさは考慮されてしかるべき問題となっております。
このような状況も踏まえ、文字色を決定する際には富士通が提供しているColorSelectorやアイ・クリエイツの提供しているカラーコントラストチェッカーなどを使いチェックすることが望ましいでしょう。
視覚障害がある方が利用する場合でもテキストが読みやすいような組み合わせについて検討しております。（JIS X8341-3, 5.5.c)
JISX8341-3 5.5.cに対応する部分で、視覚特性によっては背景色と文字色の関係から読みにくい組み合わせが存在することが指摘されています。
文字の見えやすさを視認性、読みやすさを可読性と言いますが、これは主に背景色と文字色の明度差に依存します。色覚障害の場合や加齢による場合など様々な条件が考えられますが、適切な視認性・可読性を確保するには、一般的には中央のサンプルのように明度差を大きく取るようにします。弱視の方などでOSのハイコントラスト機能を使って画面を閲覧する場合でも明度差がないと文字の判別がしにくくなります。
また画像などの場合には、明度差の大きな色で文字を縁取りしてやることによって、読みやすくなることがあります。
ウェブの様々な規格を制定するW3C（World Wide Web Consortium）のアクセシビリティ・ガイドラインであるWCAG2.0では、コントラスト比を用いた計算方法が推奨されています。
計算方法は難しくないのですが、株式会社インフォアクシアが簡単にチェックできるツール「カラー・コントラスト・アナライザー」を公開しておりますので、それを利用するとよいでしょう。
W3Cの「Techniques
For Accessibility Evaluation And Repair Tools」の中で読みやすさの計算式の試案が提示されております。下記のものがそれにあたります。
実際に計算を行うのは非常に大変なことですが、既出のカラーコントラストチェッカーや富士通から提供されているColorSelectorを用いれば、計算することなく視認性・可読性を確保することが出来ます。どなたにも使いやすいサイトの第一歩としてお使いになられることを推奨いたします。
追記：Web JIS（JIS X8341-3:2009）の改訂版では、WCAG2.0のコントラスト比が読みやすさの達成基準としてそのまま採用されております。そちらについては「JIS X8341-3:2009における文字コントラストの達成基準」のページで詳しく記述しておりますので、そちらを参照してください。
投稿日時: 2010年01月27日 19時10分
カテゴリー： JIS規格への対応 | コメントはまだありません »
タグ： JIS X8341-3, アクセシビリティ, 可読性, 視認性
文字情報を中心として扱うホームページの配色に際して、背景色・壁紙をどう扱うのがよいかをご説明いたします。
これはウェブサイトで一番大事なのは情報であり、色ではないというスタンスに立つ場合の背景色・壁紙についての考え方です。検索エンジンなどであなたのホームページを見つけてくれた方は、配色を見に来るのではなく、内容を見にくるのです。
ビジネス書や検索サイトを考えれば、わかりやすくなると思います。ビジネス書だけでなく小説なども同じ事ですが、最も大事な部分は文字の情報です。また検索エンジンそのものにおいても最も重要なことは検索結果の表示です。どちらも文字の情報をいかに読みやすくわかりやすく伝えるかが重要だということがおわかりいただけるかと思います。
特に壁紙は模様が入っているため、よほど白に近い色でなければ、文字の読みやすさを妨げこそすれ、助けてくれることはありません。
下の表は背景色と文字色による読みの速さに関する調査の結果で、最も見慣れている白地に黒がやはり一番読むのが早いということになります。判読性の順位とは離れたところからも文字を読めるという距離の順位を表しています。つまり白地に黒が最も早く読め、離れたところからでも文字を読みやすいということになります。
| （資料）D.G.Paterson and M.A. Tinker, “How to Make Type Readable,” 1940, p.120. | ||
| 配色 | 相対的読みの速さ | 大学生に判定された 判読性の順位 |
|---|---|---|
| 白地に黒 | 100.0% | 1 |
| 白地に緑 | 97.0% | 4 |
| 白地に青 | 96.6% | 2 |
| 黄地に黒 | 96.2% | 3 |
| 黄地に赤 | 95.2% | 5 |
| 白地に赤 | 91.1% | 6 |
| 赤字に緑 | 89.4% | 7 |
| 黒字に橙 | 86.5% | 8 |
| 白地に橙 | 79.1% | 9 |
| 緑地に赤 | 60.5% | 11 |
| 紫地に黒 | 48.5% | 10 |
このような理由から文字を中心として読ませたい場合は背景色は白を選ぶことをおすすめします。サービスや情報を邪魔するような色はいくら美しくても本来伝えたい内容を邪魔しないようにしましょう。
どうしても背景色をつけなければならない場合はごく薄く付けるようにしましょう。ただしさみしいからとかかわいい壁紙を見つけたなどという曖昧な理由で選んではいけません。
投稿日時: 2010年01月27日 14時23分
カテゴリー： 背景色と壁紙 | コメントはまだありません »
タグ： 可読性, 情報の伝達, 背景色
ベースカラーの明度だけを変えてサブカラーを作ります。視認性（見やすさ）・可読性（読みやすさ）は明度の差によって決まりますので、非常に重要な項目です。
印象を変えずにコントラストを付けたい時には明度を変えるのが一番簡単です。どうもぼんやりしていると感じる時は少し明度差を多めに付けるとメリハリのある配色になります。しかし色相と彩度は同じですので、統一感は損なわれません。
明度に差を付けると言うことは可読性（読みやすさ）を考える上では非常に重要なことです。背景によっては会社やお店の名前やロゴが見えにくくなったりします。
2色間の境目がぼんやりして見える場合は、この2色を背景色と文字色にすると読みにくくなるいうことになります。
元ウェブデザイナーの経験から、操作が必要なもののカラーコーディネートを得意としております。ウェブカラーに関する講演や執筆も多数あります。写真は飼い猫のぶるたんです。
アクセシビリティ アクセントカラー コーポレートカラー サイトの目的 サブカラー ジャッド トーン ベースカラー ユーザビリティ レイアウト 中性色 分析 可読性 執筆 売れる色 失敗 寒色 彩度 心構え 情報の伝達 明度 暖色 書籍 有彩色 業務委託 無彩色 競合サイト 背景色 色の三属性 色の心理的効果 色彩調和論 色相 色相環 視認性 調整 調査 配色 配色サンプル 閲覧環境 面積 面積比 類似色相 CIカラー HSBカラーモデル JIS X8341-3
坂本邦夫の「基礎からわかるホームページの配色」 produced by カラープランニングオフィス フォルトゥナ
Copyright © 2002-2010 Color Planning Office Fortuna All Rights Reserved.
