文字色と背景色の組み合わせ｜無料ホームページ教室

文字の読みやすい条件

26.色の設定で必要な１６進数の最後に、文字色と背景色の組み合わせで、とても読みづらい文字を示しました。

「10.訪問者が扱いやすいWebサイト」のバリアフリーでも、申しました通り、正常な視力の人のみが、Ｗｅｂサイトに訪れるとは、限りません。ここでは、視力が正常な人のみならず、白内障、色盲の人でも読みやすい文字色と背景色の組み合わせについて、考えたいと思います。

文字の読みやすい条件の一つとして、明暗の差があります。文字色と背景色のどちらかが、明るい色で、もう一方が暗い色であれば、文字が読みやすいとされます。

次の例は、モノトーン色で、文字色と背景色の明るさを１０％ずつ変化させたときの、文字の読みやすさを、表にまとめました。文字色と背景色の明暗の差が、大きいほど読みやすいことがわかります。

コントラストの差とは、あでやかさの差とも言えます。あでやかな色は、赤、緑、青などの原色に近い色で、あでやかでない色は、白、灰色、黒に近い色です。

下の例では、青色のみの例ですが、コントラストの差が大きいほど、文字が見やすくなります。明るさが５０％の方では、コントラスト差があっても、読みづらくなります。そのため、明暗の差とコントラストの差の両方を、考慮しなければなりません。

目のハンディーキャップには、白内障、色盲、全盲など、さまざまです。ここでは、文字色と背景色の組み合わせで、白内障、色盲の人に見やすいものについて、考えたいと思います。

白内障は、目が白っぽくなってしまう病気で、見た目がぼやけてしまいます。全体的に、コントラストが下がった状態で見えてしまうと言えますので、コントラスト差や、明暗の差を大きくしないと、通常の人よりも見づらくなります。

色盲には、３種類あります。それぞれの色の見え方は、次の通りです。

第一色覚異常では、赤色が黒っぽく見えます。第二色覚異常では、緑と赤の区別がつきにくくなります。第三色覚異常では、青が黒っぽく見えます。


正常視覚	第一色覚異常	第二色覚異常	第三色覚異常

このように、色盲の観点からも、文字色と背景色を決めていかなければなりません。とても、面倒になってきます。そこで、次に文字色と背景色を決めるのに、便利なツールをご紹介します。

白内障や色盲の人に配慮した文字色と背景色の組み合わせを、どのようなものにしたらよいか、簡単にチェックできるツールをご紹介します。それが、Fujitsu ColorSelector（カラーセレクター）です。

ColorSelectorでは、文字色と背景色を、１６進数での入力、下側のパレットからの選択、画面上からスポイトで抽出など、いろいろな方法で、入力できます。入力した結果、白内障や色盲の方には、どの程度の見やすさなのかが、右側に○×で表示されます。

ColorSelectorは、ColorSelectorのダウンロードより、入手可能です。フリーで公開されている、とても便利なツールですので、ぜひご活用ください。

ColorSelectorを使って、コントラストで紹介した例に対して、文字が読みやすいか、検証します。このように、文字色と背景色の組み合わせをチェックすることによって、読みやすいか、読みづらいかが、簡単にわかります。

ColorSelectorでのチェック結果
文字色のコントラスト	背景色のコントラスト	色	一般	白内障	第一色覚	第二色覚	第三色覚
100%	0%	■	○	○	○	○	○
90%	10%	■	○	○	○	○	○
80%	20%	■	○	○	○	○	○
70%	30%	■	×	×	○	×	×
60%	40%	■	×	×	×	×	×
50%	50%	■	×	×	×	×	×
40%	60%	■	×	×	×	×	×
30%	70%	■	×	×	○	×	×
20%	80%	■	○	○	○	○	○
10%	90%	■	○	○	○	○	○
0%	100%	■	○	○	○	○	○

リンクの色は、何も設定しなければ青で、一度訪れたリンクに関しては紫になります。この２種類の色も、背景色によっては、とても見づらくなるので、注意が必要です。

リンクの色と背景色の関係では、リンクの色と背景色を、代表的な色で表示しておりますので、参考にして下さい。