WEBサイトで半透明の色を使う方法｜背景になじむオーバーレイ配色

半透明の色を重ねると、元の背景を残しながらページ全体の色みをそろえたり、セクションの区切りをやわらかく見せたりできます。この記事では、背景の上に別の色を重ねる「オーバーレイ」を中心に、文字まで薄くせずに背景だけをなじませる方法を紹介します。ページ背景・セクション・画像の上でオーバーレイを使い分け、合成後の色まで確認するのがポイントです。

要素全体の opacity ではなく、背景色のAlphaでオーバーレイを作る

CSSの opacity は要素全体に適用されるため、その中の文字やボタンまで一緒に薄く見えます。背景だけを半透明にしたい場合は、rgb() のAlpha値を使うか、疑似要素に半透明色を置く方法が扱いやすくなります。

.section {
  position: relative;
  background: rgb(244 240 234);
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(58 91 102 / 16%);
  pointer-events: none;
}

.section__content {
  position: relative;
}

この例では、基準のスレートブルー ■#3A5B66 を16%で、ウォームオフホワイト ■#F4F0EA の上に重ねます。単純なsRGB合成では、見かけの色はおよそ ■#D6D8D5 です。文字やボタンはオーバーレイの外側に置くため、不透明度を保ったまま背景だけを落ち着かせられます。

背景になじませる3つのオーバーレイ配色

1. 暖色背景に低彩度ブルーを薄く重ねる

ウォームオフホワイト ■#F4F0EA にスレートブルー ■#3A5B66 を16%重ねると、見かけの色は約 ■#D6D8D5 になります。本文をチャコール ■#252A2D にすると、合成後の背景とのコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約10.11:1です。暖色の明るさを残しつつ、青みを少し加えてセクションを落ち着かせたいときに使えます。

2. 冷たい背景に暖色を薄く重ねて温度差をやわらげる

クールグレー ■#EDF1F3 に、くすみブラウン ■#9A6848 を12%重ねると、見かけの色はおよそ ■#E3E1DE です。チャコール ■#252A2D とのコントラスト比は約11.11:1です。背景を完全なベージュへ変えずに、冷たさを少し和らげたい場合に使えます。

3. 画像の上ではオーバーレイ色だけで文字コントラストを判断しない

ヒーロー画像の上にダークブルーグレー ■#233138 を半透明で重ねると、明るい写真と暗い写真の差をある程度そろえられます。ただし、合成後の色は写真の各ピクセルによって変わるため、「オーバーレイが50%だから白文字で十分」とは判断できません。読みやすさを安定させたい場合は、文字の背面だけを不透明なダークブルーグレー ■#233138 にし、白 ■#FFFFFF を置きます。この組み合わせのコントラスト比は約13.39:1です。

背景をなじませても、文字と重要な境界線は実際の合成後の色で確認する

オーバーレイは背景の色みをそろえるための手段であり、文字や操作部品のコントラストを自動的に保証するものではありません。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、操作部品を識別するために必要な視覚情報には隣接色との3:1以上が求められます。背景画像やグラデーションの上に半透明色を重ねる場合は、実際に隣接する合成後の色を確認します。

主要ボタンのように確実な識別が必要な要素は、オーバーレイに依存させず不透明な色にします。たとえばスレートブルー ■#355B66 のボタンに白 ■#FFFFFF を置く場合、コントラスト比は約7.40:1です。HueRollでは3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで基準色を選び、関連色・配色候補、選択色と白・黒とのコントラストを確認できます。半透明の合成結果や任意の2色同士の比較、WCAGのAA・AAA自動判定には対応していないため、オーバーレイ後の配色は実際の背景に合わせて別途確認します。