自分のサイトを開いて、なんとなく読みにくいと感じたことはないでしょうか。原因は文字の小ささではなく、色の薄さであることが多いです。
読みやすさには測れる基準がある
文字の色と背景の色の差は、数字で表せます。コントラスト比と呼ばれ、白い背景に黒い文字なら21倍、薄い灰色なら2倍というように出ます。
世界的に使われている目安は次の2つです。
- ふつうの大きさの文字 — 4.5倍以上
- 大きい文字（およそ24px以上、太字なら18.5px以上） — 3倍以上
同じ色でも、大きい文字なら足りて、小さい文字だと足りないということが起きます。「この色は使える／使えない」ではなく、「この色をこの大きさで使えるか」という判断になります。
落ちるのは本文ではなく、ブランドの色
先日、あるサイトの配色を1組ずつ測りました。結果ははっきり分かれました。
本文の灰色は背景との差が6.4倍で、余裕で足りていました。背景に薄い色を敷いた場所も、白抜きの見出しも通りました。
足りなかったのは、そのサイトのブランドカラーです。緑を白い背景に置くと3.4倍。見出しとして大きく使う分には足りますが、本文の中に16pxのリンクとして置くと足りません。
そして多くのサイトで、リンクの色はブランドカラーに設定されています。色を決めた時点では見出しやボタンを見ているので、そこでは何も問題がありません。あとから本文にリンクを置いたとき、静かに基準を割ります。
もう1つ落ちたのが、入力欄にうっすら出ている案内文です。「お名前」「メールアドレス」と薄い灰色で書かれている、あれです。ここは1.7倍しかありませんでした。薄く見せることが目的のデザインなので、そもそも構造的に落ちやすい場所です。
自分のサイトで確かめる
道具なしでできる方法から。スマートフォンの画面の明るさをいちばん暗くして、自分のサイトを開いてください。読めない場所が、そのまま薄すぎる場所です。屋外で見るのも同じ効果があります。
正確に知りたい場合は、色の番号（#5B9956 のような6桁の文字列）を制作者に聞いて、無料のコントラストチェッカーに文字色と背景色を入れます。ブラウザで動くものがいくつもあり、比が数字で出ます。
見るべき場所は4つです。
- 本文の中のリンク
- 注釈や補足の、小さくて薄い文字
- 入力欄の薄い案内文
- 写真の上に置いた白い文字
足りなかったときにどうするか
ブランドカラーそのものを変える必要はありません。文字用にもう1段濃い色を別に用意して、本文のリンクだけそちらに切り替えます。見出しやボタンは元の色のまま残せるので、見た目の印象はほとんど変わりません。
リンクに下線を付けるのも有効ですが、意味が違います。下線が助けるのは「どこがリンクか分かる」ほうで、薄くて読みにくいこと自体は直りません。両方やるのが望ましいです。
入力欄の案内文は、薄いままでも致命的ではありません。ただし、そこにしか説明が書かれていない場合は問題です。入力を始めると案内文は消えるので、消えたら何を書く欄か分からなくなります。欄の外に見出しを付けておけば解決します。
まとめ
読みにくさは感想ではなく、測れる数字です。
そして落ちるのは、たいてい本文ではなくブランドカラーを小さく使った場所です。まず本文の中のリンクを見てください。
