「文字の読みやすさ」に関するアンケートの集計結果に対する感想

設問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となっています。

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