私事ですが、ブルーライト軽減PCメガネを購入しました。
ZoffのPCウルトラというやつです。
クリアタイプですが、実際はうっすら黄色いですね。
見え方も、ちょっと黄ばんで見えます。

効果のほどは人によりけりだと思いますが、私はとても気に入っています。
考えてみれば、毎日顔を合わせるものにはほとんど液晶がついてますからね。
そりゃあ、目が疲れるわけです。

PCメガネは見る側のできる目の対策の一つですが、見せる側にも見やすく読みやすくは心がけたいものですね。
最近は広告バナーづくりに頭を悩ませています。
どうすれば見やすく読みやすく、そして目立つバナーが作れるのか、と。

一般に、見やすさは視認性、読みやすさは可読性というようです。

（なんと、視認性と可読性は別物、らしいです。）

視認性

視認性は色の明度（Brightness、Value）に大きく影響します。
明度差が大きければ大きいほど見やすく、小さければ小さいほど見にくい、とされています。
下の例では、左側が一般に明度差が小さく見にくいと言われる赤と緑の組み合わせです。
右側は明度差を分かりやすくするため、彩度を０にしてグレーにしたものです。
B＝○%と書いてあるのは、明度の数値です。

「明度差」に注目してみると、上から三つ目の例が一番視認性が高いことが分かります。（100-20で明度差は80%）
なんとなく一番下も視認性が高そうに見えますが、実際の明度差は上二つと変わりません。
では、なんで一番下も見やすく思えたのか、この辺が「可読性」と関係ありそうですね。

可読性

可読性は色の彩度（Value、Saturation）に大きく影響します。
視認性で出てきた明度差が大きい＝読みやすい、ではないので注意です。

ここでもう一度、視認性の例を見てみましょう。

上から三つ目が一番明度差が大きく視認性が高い、という結果でしたが、果たして読みやすいでしょうか？
そして、一見すると視認性が高そうだった一番下は、どうですか？読みやすいですか？
これだけでは何とも言えないと思うので、色はそのままで文章にしてみると下のようになります。

どうでしょうか、上は緑色がきつくて目立ちはしますが、ちょっと読みづらいですね。
じっと見ていると、目がチカチカします。
下は、上と比べるとやや落ち着いた感じで、ずっと読みやすいです。

上と下の何が違うのかというと、やっぱり彩度です。
上は彩度が高すぎて、チカチカ、ギラギラして目に悪く、読みづらく感じてしまい、下は彩度が程良く抑えられているため読みやすく感じるというわけです。
ちなみに数字で表すと、上の緑はS=100%、下の赤はS=80%です。
たった、20%の差ですが、それがこんなに大きく感じられてしまうとはちょっと驚きですね。

ちなみに最も可読性の高い色の組み合わせは、白と黒です。
また、補色関係にある色同士はハレーションを起こし、チカチカさせるので可読性は低いと言えます。

まとめ

だらだらと長くなりましたが、結局、

視認性は、明度差に注意！
可読性は、彩度に注意！

ということです。
そしてやはり、視認性優先か、可読性優先かの判断を、色を選ぶ側が上手くやることが肝心ですね。
これを踏まえて、私はバナー制作に勤しみます…

Thanks for reading to the end!!