画像やグラデーション上のテキストオーバーレイ

画像上のテキストを読みやすくする

画像や動画の上にテキストを直接配置するのは、ヒーローセクション、バナー、カードで人気のデザインパターンです。課題は画像コンテンツが変化するため、オーバーレイ技術なしでは一貫したコントラストが不可能なことです。

オーバーレイによる解決

画像とテキストの間に半透明のオーバーレイを追加します：

.hero {
  position: relative;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 白テキスト用のダークオーバーレイ */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  /* ほとんどの画像背景で白テキストに対して
     約4.5:1を確保 */
}

.hero-text {
  position: relative;
  color: #ffffff;
  z-index: 1;
}

オーバーレイの不透明度ガイド

必要なオーバーレイの不透明度は、テキスト色と典型的な画像の明るさに依存します：

テキスト色	オーバーレイ色	最小不透明度	おおよその比率
白	黒	0.55	~4.5:1 (AA)
白	黒	0.70	~7:1 (AAA)
黒	白	0.55	~4.5:1 (AA)
黒	白	0.70	~7:1 (AAA)

グラデーションオーバーレイの代替

グラデーションオーバーレイはより視覚的に魅力的です：

.hero::before {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.0) 100%
  );
}

/* オーバーレイが最も強い下部にテキストを配置 */
.hero-text {
  position: absolute;
  bottom: 2rem;
  color: #ffffff;
}

テスト戦略

画像コンテンツは変化するため、以下に対してオーバーレイをテストしてください：

1. ほぼ白/明るい画像
2. ほぼ暗い画像
3. 混合/忙しい画像

白テキストがオーバーレイで明るい画像に対してコントラストを通過すれば、暗い画像でも通過します。課題は、最も明るい予想コンテンツに対して機能する最小オーバーレイ不透明度を見つけることです。

代替：テキストコンテナ

オーバーレイの代わりに、テキストを不透明なコンテナに配置します：

.hero-text {
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
}