「このサイト、文字が見づらいな」と感じたことはありませんか？背景と文字の色が似すぎていると、目が疲れたり、そもそも読めなかったりします。これはデザインの問題でもありますが、アクセシビリティ（利用しやすさ）の問題でもあります。

この記事では、カラーコントラストとは何か、どれくらい差をつければ十分なのかを、具体的な数値と例で解説します。

カラーコントラストとは？

カラーコントラストとは、背景色と前景色（文字色など）の明るさの差のことです。コントラスト比が高いほど文字がはっきり読め、低いほど読みにくくなります。

視力が弱い方や色覚に特性のある方にとって、コントラストが低いサイトは特に困難です。Webアクセシビリティの国際標準であるWCAG（Web Content Accessibility Guidelines）では、最低限のコントラスト比が数値で定められています。

WCAGのコントラスト比の基準

コントラスト比は「1:1（差なし）」から「21:1（白と黒）」の範囲で表されます。WCAGでは以下の2段階の基準があります。

レベル通常テキスト大きなテキスト（18pt以上）
AA（最低基準）4.5:1 以上3:1 以上
AAA（より高い基準）7:1 以上4.5:1 以上

一般的なWebサイトではAAレベルを目指すのが標準的です。

代表的なコントラスト比の例

  • 白（#FFFFFF）×黒（#000000）：21:1（最大）
  • 白（#FFFFFF）×濃いグレー（#595959）：7:1（AAA合格）
  • 白（#FFFFFF）×中グレー（#767676）：4.54:1（AA合格ギリギリ）
  • 白（#FFFFFF）×明るいグレー（#999999）：2.85:1（AA不合格）
  • 白（#FFFFFF）×薄い青（#93C5FD）：2.04:1（不合格）

よくある失敗例と改善方法

デザインでよく見かけるコントラスト不足のパターンです。

  • NG：白背景に薄いグレーのプレースホルダー → OK：#6B7280以上に暗くする
  • NG：黄色背景に白文字 → OK：黄色背景には黒か濃い色の文字を使う
  • NG：水色背景に青文字 → OK：背景か文字どちらかの彩度・明度を大きく変える

背景が白か黒かどちらが読みやすいか判断する方法

背景色が明るいか暗いかを数値で判定する「相対輝度（relative luminance）」という計算方法があります。ざっくり言うと、明るい背景（白系）には暗い文字、暗い背景（黒系）には明るい文字が原則です。グレーの場合は数値を計算しないと判断が難しいので、ツールを使うのが確実です。

よくある質問（FAQ）

アイコンやボーダーにもコントラスト基準は適用されますか？
WCAGのコントラスト基準はテキストとテキスト画像が主な対象です。ただし、意味を持つUIコンポーネント（ボタンの境界線、グラフなど）については別途3:1以上のコントラストが推奨されています。
グラデーション背景に文字を置く場合はどうすればいいですか？
グラデーションの最も明るい部分と最も暗い部分の両方でコントラストを確認するのが安全です。どちらかで不合格になる場合は、文字に白い影（text-shadow）をつけたり、文字の下に半透明の帯を敷いたりする方法があります。
ブランドカラーがコントラスト基準を満たしていない場合はどうするべきですか？
ブランドカラーをロゴやアクセント色として使い、文字色には基準を満たした別の色を選ぶのが現実的です。同系色のより暗いバリエーションを作るだけで基準を満たすケースも多いので、まずコントラストチェッカーで確認してみてください。

まとめ

  • カラーコントラストとは背景色と文字色の明るさの差のこと
  • WCAGのAA基準は通常テキストで4.5:1以上、大きなテキストで3:1以上
  • 薄いグレーや同系色の組み合わせはコントラスト不足になりやすい
  • コントラスト比は目視では判断が難しく、ツールでの計測が確実

配色を決める前に、以下のツールでコントラストと色の組み合わせを確認しましょう。