その文字、読める？文字色のコントラストをハッシー先生に聞いてみた

文字のコントラストってなぜ大事？

コントラストとは、文字の色と背景の色の「明るさの差」のことです。差が大きいほど文字はくっきり見え、差が小さいほど背景に溶けて読みにくくなります。

作っている本人は、内容を知っているので読めてしまいます。画面も明るく、時間をかけて見ているからです。でも実際に読む人は、年配の方だったり、視力が弱い方だったり、日差しの下でスマホを見ていたりします。同じ色でも、読む人の状況によって見え方は大きく変わるんですね。

地域のお知らせや園のお便り、福祉施設の案内などは、とくにいろいろな方が読むものです。せっかく大事なことを書いても、読めなければ伝わったことにはなりません。僕は、色を決めるときは必ず数字でも確かめるようにしています。

専門学校でWebの授業をしていても、学生さんの作品でいちばん多い指摘のひとつがこの「文字の読みやすさ」です。デザインの雰囲気を大切にするあまり、文字を淡い色にしてしまう。気持ちはよく分かりますが、読めない文字は、どんなにおしゃれでも役目を果たせません。

ツールの使い方

文字色コントラスト確認は、文字色と背景色を選ぶだけで、その組み合わせが読みやすいかを WCAG 2.1 の基準で判定するツールです。

1. 文字色と背景色を選ぶ
   カラーパレットから選ぶか、「#F07D1A」のようなカラーコードを入力します。「入れ替え」ボタンで文字色と背景色を逆にすることもできます。
2. 判定を見る
   コントラスト比と、「とても読みやすい」「読みやすい」「大きな文字なら読める」「読みにくい」の4段階の判定が出ます。ふつうの大きさの文字と、見出しなどの大きな文字それぞれで、基準（AA・AAA）を満たすかも表示されます。
3. 見本と改善案を確かめる
   その色で作ったWebページとチラシの見本が見られます。基準に届かないときは、元の色味をできるだけ残したまま明るさを調整した改善案が、文字色だけを変える案と背景色だけを変える案に分かれて出てきます。

色の見え方が違う人やグレースケールでの見え方も、目安として並べて表示されます。今の色はページのURLに入るので、共有用URLをそのまま送れば、相手も同じ結果を見られます。

「オレンジ×白」「薄いグレー×白」「赤×緑」など、つまずきやすい組み合わせを1クリックで試せるボタンもあります。どんな組み合わせが基準に届かないのか、まずはここで感覚をつかんでおくと、次から色を選ぶときに迷いにくくなります。計算はすべてお使いのブラウザの中で行われるので、制作途中の色を気軽に試せます。

ここがポイント

• 本文は 4.5:1 以上を目安に
  WCAG 2.1 のAAでは、ふつうの文字は 4.5:1 以上、大きな文字は 3:1 以上が基準です。注意書きのような小さな文字ほど、余裕をもたせると安心です。
• ブランドカラーは「使う場所」で分ける
  明るいオレンジや黄色は、白い文字をのせると基準に届かないことがよくあります。その場合は、背景ではなくアクセントの線やアイコンに使い、文字は濃い色で組むときれいにまとまります。
• 改善案は「少しだけ」動かすのがコツ
  色をまるごと変える必要はありません。改善案のように明るさだけを少し調整すれば、雰囲気を保ったまま読みやすくできます。
• グレーの文字は要注意
  白い背景に薄いグレーの文字は上品に見えますが、基準に届かないことが多い組み合わせです。補足の文字こそ、一度確かめてみてください。

まとめ

読みやすさは、センスではなく確かめ方の問題です。数字で確認する習慣をつけるだけで、届けたい人にきちんと届くデザインに近づきます。色を決めたら、公開や印刷の前にひと呼吸おいて、ツールで確かめてみてください。

なお、印刷物は紙の質やインクで、画面より色が沈んで見えることがあります。チラシの文字は、画面で基準ぎりぎりの色より、少し余裕のある組み合わせを選んでおくと安心です。

文字色コントラスト確認を使ってみる

自分のチラシやサイトに当てはめるとどうなるか迷ったら、気軽にお問い合わせください。ブランドカラーを活かしたまま読みやすくする方法も、一緒に考えます。