色のコントラストの話

色のコントラストについてお話しします。コントラストとは、文字の色と背景の色がどれくらいはっきり区別できるか、ということです。

近年、Webデザインの流行で「淡いグレーの上に、少し濃いグレーで本文を書く」という見せ方をよく目にいたします。たしかに、おしゃれで洗練された雰囲気にはなります。しかし、年齢を重ねた目、白内障の傾向のある目、または屋外で画面を見るような状況では、文字が背景に沈んでしまい、ほとんど読めなくなることがあります。

Web の世界には、「WCAG（ダブリュー・シー・エー・ジー）」という、Webの読みやすさに関する国際的な目安があります。本文の場合、文字と背景の明るさの差が「4.5倍」以上必要とされています。これは、専門のツールを使えば数値で確認できますが、「白い紙にしっかりインクが乗っていれば合格、薄い印刷は不合格」という感覚で、ほぼ大丈夫です。

見出しなど大きな文字の場合は、もう少し緩く「3倍」以上の差で良いとされています。ですから、装飾的な見出しはコントラストをやや抑えても問題ありませんが、本文だけは妥協しないようにする、というのが現場の判断です。

もし「うちのサイト、なんとなく読みづらいんじゃないか」とご不安でしたら、ご一緒にコントラストを確かめさせていただきます。ツールに掛ければ、すぐに数値が出ます。直し方も、たいていは設定のひと手間で済みます。