皆さんも毎日、ニュースや通販、企業のサイトなど、
さまざまなホームページをご覧になっていると思います。

そのとき、文字が背景に溶け込んで読めない、
という経験はあまりないのではないでしょうか。

それはなぜだと思いますか？

デザイナーのセンスでしょうか。
それとも偶然でしょうか。

実は、「文字と背景の色には、これだけの差をつけましょう」
という国際的なルールがあるのです。
そしてこのルールは、世界各国の法律とも関わっています。

今回は、身近なのに意外と知られていない
「4.5:1」という数字についてご紹介します。

ここでクイズです

白い背景に、グレーの文字。
次の2つのうち、ルールに合格するのはどっちでしょう？

正解は B です。
Aも読めないことはありませんが、
実は基準を満たしていません。

ルールを決めているのは、
WCAG（ウェブ・コンテンツ・アクセシビリティ・ガイドライン）
という国際基準です。

文字と背景の明るさの差を「コントラスト比」という数字で表し、
普通の文字なら4.5:1以上と定めています。

ちなみに、白と黒が最大の21:1。
Aの薄いグレーは約2.8:1で、基準の6割ほどにとどまります。

#777777 と #767676。
目ではほぼ区別できませんが、ここが合否の分かれ目です。

法律で決まっているの？

答えは「半分正解」です。

WCAGそのものは法律ではなく、あくまでガイドライン。
ただ、世界中の法律が「使いやすいサイトとは何か」の物差しとして
WCAGを使っており、法律との結びつきが強まっています。

• 日本：2024年4月から、障害者差別解消法で
  民間企業にも「合理的配慮」が義務になりました。
  サイトを最初から見やすく作ることはまだ「努力義務」ですが、
  対応を求める流れは年々強まっています。
• アメリカ：ウェブサイトの使いにくさを理由とした訴訟が
  数多く起きています。
• ヨーロッパ：2025年6月から新しい法律がスタートしました。
  EUの消費者向けにサービスを提供していれば、
  日本の企業も対象です。

文字の読みやすさは、デザインの好みだけでなく、
企業として向き合うべきテーマになりつつあります。

実は、すべての人のためのルール

「障害のある方のための話」と思われるかもしれません。
ですが、こんな経験はありませんか。

晴れた日の屋外で、
スマホの画面が見づらかったこと。

これも、コントラスト不足によるものです。

ほかにも、年齢とともに小さな文字が見づらくなった方、
色の見え方が多くの人と異なる方（日本人男性の約20人に1人）、
弱視の方など、薄い文字を読みづらいと感じる方は少なくありません。

4.5:1は「一部の人への特別対応」ではなく、
誰も取りこぼさないための最低ラインです。
年齢や環境によって、誰もがその当事者になり得ます。

身近にある「見づらい」デザイン

この視点を持つと、普段のサイトの見え方も少し変わってきます。
よくあるのは、次のようなパターンです。

• デザイン性を重視した薄いグレーの本文
• 写真の上にそのまま乗せた白文字
• 白地に黄色や水色のボタン

いずれも、色を少し調整するだけで
読みやすさが大きく変わります。

最後に、すぐに試せることをご紹介します。

一度、コントラスト比を測ってみませんか？

「コントラスト チェッカー」で検索すると、
色を入力するだけで比率を確認できる無料ツールが見つかります。
数分で確認できますので、ぜひお試しください。