線の太さと色のコントラストから強調を考える

色のサイズとコントラスト

---

図は同じ2色の組み合わせを高さを変えて並べてみた例です。左から30ピクセル、10ピクセル、5ピクセル、2ピクセル、1ピクセルとなっています。理屈の上では、2色の差は変わらないのですが、右に行くほど2色の境界線はわかりにくくなっていきます。この現象は2色の彩度が低いほど顕著になります。2色の物理的な性質は左から右まで変わらないので、見え方の違いは見る側の人間の脳の働きによるものなのです。

この見え方が問題になってくるのは、主に細い文字による表現においてです。表示するフォントのサイズにもよりますが、通常のテキスト部分で使われるサイズだと文字の線は太さが1ピクセルであることが多いでしょう。その際に強調やリンクなどの色を変えたときに、思ったほど色の差がないという場合が多いのです。単なる強調である場合には、文字は読めるわけなので、読み進める上での問題はないのですが、これが下線を取り外したリンクである場合には、クリックされないと困るような事態も生じます。そこで、下のように強調する方の色の彩度や明度を調整して、より目立たせるようにしなければなりません。

閲覧環境によっても、同じ色が様々な見え方になったりします。色の差で何か情報を伝えたいような場合には、あまり細いラインなどは使わないようにした方が無難でしょう。文字色ではなく、背景色を使って強調するのも、情報を区別する良い方法です。