ウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイト
ウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイト
ホーム » 文字の読みやすさに関する調査 » 「文字の読みやすさ」に関するアンケートの集計結果に対する感想
回答の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となっています。
ただし背景色が緑色の場合に、とても「読みやすい」と「読みやすい」が大変多くなっているのが特徴です。同じコントラスト比でかなり差が出ているのがおもしろい結果となりました。この辺りも要検討でしょう。
元ウェブデザイナーの経験から、操作が必要なもののカラーコーディネートを得意としております。ウェブカラーに関する講演や執筆も多数あります。写真は飼い猫のぶるたんです。
アクセシビリティ アクセントカラー コーポレートカラー サイトの目的 サブカラー ジャッド トーン ベースカラー ユーザビリティ レイアウト 中性色 分析 可読性 執筆 売れる色 失敗 寒色 彩度 心構え 情報の伝達 明度 暖色 書籍 有彩色 業務委託 無彩色 競合サイト 背景色 色の三属性 色の心理的効果 色彩調和論 色相 色相環 視認性 調整 調査 配色 配色サンプル 閲覧環境 面積 面積比 類似色相 CIカラー HSBカラーモデル JIS X8341-3
この記事をTwitterでつぶやく
[...] 1つ前の記事： アンケートの集計結果に対する感想 [...]
[...] 1つ前の記事： アンケートの集計結果に対する感想 [...]