コントラスト比・アクセシビリティ

定義

コントラストとは、文字と背景の明るさの差を一つの比率で表した値です。差がまったくない同じ色どうしが 1対1で、純粋な黒い文字に純粋な白い背景のように差が極端に大きいときが最大の21対1になります。この比率が 大きいほど文字の輪郭が背景からくっきり浮かび上がって目に入りやすく、小さいほど文字が背景に溶け込んで 読みづらくなります。ここでいう明るさの差は、目で見たなんとなくの印象ではなく、二つの色の明るさを決まった 計算式にかけて一つの数字として取り出した結果です。だからコントラストは好みの問題ではなく測定できる数値で あり、色を選ぶときに勘ではなく数字で確かめられるのが心強いところです。

なぜ重要か

コントラストが大切なのは、それが「この画面を誰が読めるか」をそのまま決めてしまうからです。視力の良い人が 明るい室内で見ればたいていの色は読めますが、視力の弱いユーザーや、明るい屋外で画面を見る人、古くなった ディスプレイを使っている人にとっては、コントラストが少し低いだけで文字が消えてしまいます。十分な コントラストは特別な配慮ではなく、すべてのユーザーが情報にたどり着くための最低限の条件です。さらに、 コントラストが確保された画面はより鮮明で信頼できる印象になり、アクセシビリティを守ることがそのまま デザインの完成度を高めることにつながります。コントラストを気にかける習慣は、より多くの人が読める画面を つくるための確実な投資です。

よくある間違い

• 薄いグレーの文字が洗練されて見えるという理由で、コントラストを犠牲にしてしまうケースです。白い背景の 上の淡いグレー（#CCC のような色）は上品に見えても基準にはるかに届かず、多くのユーザーにとっては文字が ほとんど見えなくなってしまいます。
• 大きな見出しのコントラストだけを確認して、本文や補足説明、入力欄のガイド文字を見落としてしまうことです。 本来じっくり読むべき小さな文字ほど高いコントラストが必要で、薄いグレーの注意書きはとくに見落としやすい 死角になります。
• 背景が白一色だと思い込んでしまうことです。画像の上に重ねた文字やボタンのホバー色の上では、コントラストは あっという間に崩れてしまうので、実際に重なるすべての状態をあわせて確認する必要があります。

実務のヒント

• WCAG の基準を覚えておいて、実務の最低ラインにしましょう。本文の文字は背景と 4.5対1 以上、大きな文字は 3対1 以上が必要です。スライダーで 4.5 の境目を自分で行き来しながら、どこから文字が読めはじめるかを 目で体感しておくと、感覚が正確になります。
• 色を決めるときは、コントラスト検査ツールを手元に置いてリアルタイムで値を確認しましょう。目には通っている ように見えても、数字では未達というケースはよくあるので、測ることを習慣にしておくほうが安全です。
• コントラストがぎりぎりなら、文字の色を少し暗くするか背景を明るくして余裕をもたせましょう。基準を かろうじて超えた値は、別の画面や別の照明の下では簡単に崩れてしまうので、少し余裕をもって取っておくと 安心です。

関連概念