HTMLカラーコード・配色ツール｜HueRoll
補色・類似色の配色やコントラストを確認できる無料カラーパレット

CSSで透明色を使う方法｜opacityとRGBAの違い

TIPS

WEBサイトの背景を少し透かしたいとき、CSSのopacityとrgba()はどちらを使えばよいのでしょうか。違いは、透明になる範囲です。案内パネルを例に、背景だけを半透明にする方法と、文字やボタンまで薄くなる場合を比較します。

opacityは要素全体、RGBAは指定した色の透明度を変える

CSS（Cascading Style Sheets）は、WEBページの色や配置を指定する仕組みです。opacityは要素全体の不透明度を指定するプロパティです。opacity: 1なら完全に不透明、opacity: 0なら見えなくなります。opacity: 0.45は不透明度45％、つまり55％透けた状態です。文字やボタンが中にあれば、それらを含む完成した要素全体が薄く表示されます。

RGBAはRed（赤）・Green（緑）・Blue（青）・Alpha（不透明度）で色を表す書き方です。最初の3つの数値はそれぞれ0〜255、最後の数値は通常0〜1で指定します。background-color: rgba(255, 255, 255, 0.45)なら、白#FFFFFFの背景色だけを45％の不透明度にできます。文字やボタンの色は、それぞれ別に指定していれば薄くなりません。

現在のCSSではrgb(255 255 255 / 45%)とも書けます。rgba()は引き続き使える表記です。背景を透かしたいなら色のアルファ値、パネルと中身をまとめてフェードさせたいならopacityというように使い分けます。

同じ0.45で比較：案内パネルの文字はどう変わる？

青みのある背景#AEC8DFの上に、案内パネルを2枚置く例です。パネルの元の背景は白#FFFFFF、見出しと本文は濃い青灰色#203247、枠線は青灰色#365871、ボタンの背景は濃い青#245271、ボタンの文字は白#FFFFFFにします。色を同じにして、透過させる対象だけを変えます。

<div class="alpha-example">
  <section class="alpha-card alpha-card--whole">
    <h3>要素全体を透かす</h3>
    <p>文字やボタンも薄く見えます。</p>
    <button type="button">内容を見る</button>
  </section>
  <section class="alpha-card alpha-card--background">
    <h3>背景だけを透かす</h3>
    <p>文字とボタンは通常の濃さです。</p>
    <button type="button">内容を見る</button>
  </section>
</div>
.alpha-example {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  padding: 24px;
  background-color: rgb(174 200 223);
}
.alpha-card {
  padding: 20px;
  border: 2px solid rgb(54 88 113);
  border-radius: 10px;
  background-color: rgb(255 255 255);
  color: rgb(32 50 71);
}
.alpha-card h3 { margin-top: 0; }
.alpha-card button {
  margin-top: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background-color: rgb(36 82 113);
  color: rgb(255 255 255);
}
.alpha-card--whole { opacity: 0.45; }
.alpha-card--background {
  background-color: rgba(255, 255, 255, 0.45);
}

両方とも、パネル中央の白い背景にかかる不透明度は45％です。下地と合成された背景色は、どちらもおよそ淡い青灰色#D2E1EDになります。しかし左のopacity方式では、本文の見かけの色まで約#6E849Bに薄まり、背景とのコントラスト比は約2.89:1です。右のRGBA方式なら本文の濃い青灰色#203247は変わらず、背景#D2E1EDとの比は約9.78:1です。

右のボタンも、白文字#FFFFFFと濃い青の背景#245271の比が約8.33:1のままです。一方、左のボタンでは、文字とボタンの色の両方が下地と混ざるため、見かけのコントラスト比は約2.43:1まで下がります。見せたい文字や操作があるパネルには、背景色へのアルファ指定が向いています。

背景が変わると合成色も変わるため、完成画面で確認する

上の数値は、下地が一定の青みのある背景#AEC8DFである場合の計算です。写真やグラデーションの上では、同じRGBAでも場所によって背景の合成結果が変わります。文字と背景を実際の重なりで確認してください。WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）では、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上のコントラストを求めています。

この例のRGBAパネルでは、枠線#365871とパネル内側#D2E1EDの比は約5.64:1、枠線と外側の背景#AEC8DFは約4.35:1です。境界が操作や理解に必要な場合は、文字だけでなく隣り合うUIの色も確認します。

また、opacity: 0は見えなくするだけで、要素が消えたり、必ずクリックやキーボード操作ができなくなったりするわけではありません。非表示の操作部品には、目的に合わせてdisplayやvisibility、フォーカス管理も検討しましょう。

HueRollでは色の元となる6桁のHEX（16進数で表す色コード）を確認・コピーできますが、RGBAの直接入力や、半透明の色と任意の下地を合成したコントラストの自動判定はできません。元の色を決めた後にCSSで不透明度を設定し、最終的な組み合わせを別途確かめるのが確実です。