透過カラーをWEBデザインで使うコツ｜RGBAで自然な重なりを作る方法

半透明の色を使うと、背景の色を残しながらカード、ラベル、ホバー状態などに色を重ねられます。RGBAはRGB（赤・緑・青）にAlpha（アルファ、透明度を表す成分）を加えた考え方です。CSSでは rgba() は現在 rgb() の別名として扱われ、rgb(49 95 120 / 18%) のように透明度を指定できます。この記事では、同じ透過色でも背後の色によって見える色が変わる点を押さえ、自然な重なりを作る方法を紹介します。

透過色は単独の色ではなく、背後の色と合成して見える

例として、基準色を落ち着いたブルー ■#315F78 とします。これを18%で重ねる rgba(49, 95, 120, 0.18) と、現代的なCSS記法の rgb(49 95 120 / 18%) は同じ意味です。Alphaは0に近いほど透明、1に近いほど不透明になります。

この18%ブルーをクールオフホワイト ■#F7F8FA の上に重ねると、単純なsRGB合成では見かけの色はおよそ ■#D3DCE3 になります。一方、ウォームベージュ ■#F3EDE2 の上ではおよそ ■#D0D3CF です。同じRGBA指定でも結果が変わるため、「透明色そのもの」だけを見て配色を決めず、実際の背景との組み合わせで確認します。

カード・ラベル・ホバーで透明度の役割を分ける

1. カード背景は低いAlphaで背景とのつながりを残す

白 ■#FFFFFF の上に基準ブルー ■#315F78 を12%で重ねると、見かけの色はおよそ ■#E6ECEF になります。本文をチャコール ■#20252B にすると、この合成色とのコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約12.94:1です。カード全体を不透明な別色へ変えるより、背後の明るさを少し残した面を作れます。

2. ラベルは背景を半透明、文字は不透明にする

状態ラベルでは、グリーン ■#2E6A4F を14%で白背景に重ねると、見かけの色はおよそ ■#E2EAE6 です。その上の文字を不透明なダークグリーン ■#244B36 にすると、コントラスト比は約8.03:1です。背景だけを薄くし、文字まで透明にしないことで情報の強さを保ちやすくなります。

3. ホバーは黒や白の薄いレイヤーで明暗を変える

主要ボタンをブルー ■#315F78、文字を白 ■#FFFFFF にすると、コントラスト比は約6.91:1です。ホバー時に黒を8%重ねると、見かけの色はおよそ ■#2D576E となり、白文字との比率は約7.78:1です。状態ごとに新しい色を増やす代わりに、同じ基準色へ薄いレイヤーを重ねる方法があります。

文字や重要な境界線は、透過率だけで安全性を判断しない

半透明色は背後の色で最終結果が変わります。たとえば基準ブルー ■#315F78 を28%で白 ■#FFFFFF 上に重ねると、見かけの色はおよそ ■#C5D2D9 で、白とのコントラスト比は約1.54:1です。この線だけで入力欄など重要な操作部品を識別させるには不十分です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、操作部品を識別するために必要な視覚情報には隣接色との3:1以上が求められます。

HueRollではRGBA形式を直接入力するのではなく、基準となる不透明色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで選び、関連色・配色候補、選択色と白・黒とのコントラストを確認できます。コピーされる色も6桁HEXです。透過率はCSS側で加え、合成後の色と文字・境界線のコントラストは実際の背景に合わせて別途確認します。