パウダーブルーの配色例｜淡い背景と見出しの合わせ方

パウダーブルーをWebページに使うとき、背景を淡い青で広く塗る方法と、見出しの帯だけに使う方法では情報の見え方が変わります。どちらも柔らかな雰囲気を作れますが、白いカードや薄い文字が埋もれないようにする工夫が必要です。色の役割と、見出し・本文・境界線の具体的な組み合わせを紹介します。

パウダーブルーには濃い見出し色を合わせる

パウダーブルーは白みと灰みを含む淡い青です。CSS（Webページの見た目を指定する仕組み）では、色名「powderblue」に■#B0E0E6という値が定められています。HEX（16進数でWebの色を指定するコード）で同じ色を再現できます。ただし日常的な色名としてのパウダーブルーが、この値だけに限定されるわけではありません。

このパウダーブルー■#B0E0E6と白■#FFFFFFのコントラスト比（2色の相対的な明るさの差）は約1.43:1です。白文字や白いカードだけでは、淡い背景と十分な差がつきません。見出しを濃い青灰■#18394Bにすると背景との比は約8.49:1、本文に暗いグレー■#293942を使えば約8.33:1です。見出しの文字色は濃く保ち、背景色の面積で強弱をつけましょう。

背景と見出しを変える2つの具体例

FAQページ：淡い青を広い背景に使う

よくある質問をまとめるページでは、全体をパウダーブルー■#B0E0E6にし、各質問のカードは白■#FFFFFFにします。質問の見出しを濃い青灰■#18394B、回答の本文を暗いグレー■#293942にすると、白いカード上でもそれぞれ約12.17:1、約11.94:1のコントラスト比があります。カード内で見出しを太字にし、質問と回答の間隔を広げると、色数を増やさずに情報を整理できます。

ただし白いカードとパウダーブルーの外側の差は約1.43:1しかありません。カードの輪郭が必要なら灰青■#526B79の枠線を使うと、外側の淡い青に対して約3.92:1、カードの白に対して約5.62:1です。見出しや余白でも各質問を分け、枠を細くしすぎないようにします。

記事ページ：白背景にパウダーブルーの見出し帯を置く

長い解説記事では、本文全体の背景を白■#FFFFFFにして、各章の見出しだけをパウダーブルー■#B0E0E6の帯に載せます。文字は濃い青灰■#18394Bのまま使い、帯と文字の比は約8.49:1です。本文は暗いグレー■#293942で、白背景との比は約11.94:1。見出し帯を短い範囲に限定すると、章の始まりに変化をつけながら読み進められます。

帯と白い本文領域の差も約1.43:1なので、章の区切りには上下の余白と見出しの太さも使います。案内ボタンを置くなら深い青緑■#14566Aと白■#FFFFFFの文字で約8.17:1、ボタンとパウダーブルーの周囲は約5.70:1です。温かい色を少し添えたい場合は、落ち着いた赤茶■#954C3Eを白地の短いラベルに使えば約6.21:1の文字コントラストが得られます。

淡い色がぼやけるときに確認すること

見出しの色を薄くしすぎると、背景との差が小さくなります。まず文字を濃いままにして、見出しの太さや帯の高さ、余白を調整しましょう。カードや入力欄を色だけで識別する場合も、必要な境界には濃い線を使います。装飾のための淡い色分けと、操作に必要な区切りを同じ基準で扱わないことが大切です。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。操作部品や意味のある図形を識別するために重要な視覚情報も、隣接する色との3:1以上が必要になる場合があります。HueRollではHEXを入力して関連色や配色候補を探し、選択した色と白・黒とのコントラストを確認できます。任意の2色の比較やAA・AAAの自動判定はできないため、完成画面では実際の色の組み合わせを別途検証してください。