ベビーブルーのカラーコードと使い方｜バナーの配色例

ベビーブルーをバナーに使うとき、背景をすべて水色にするか、一部分だけに使うかで印象は変わります。淡い青をきれいに見せるには、見出しやボタンの色、写真を置く場所まで決めることが大切です。代表的なカラーコードと、横長の告知バナー・正方形の商品バナーの配色例を紹介します。

ベビーブルーのカラーコードと合わせる文字色

ベビーブルーは明るく柔らかな青色の呼び名で、Webで使う数値が一つだけに決まっているわけではありません。よく紹介される例は■#89CFF0で、RGB（赤・緑・青の強さをそれぞれ0～255で表す形式）では137・207・240です。HEXはWebの色を16進数で表すコードで、色を同じ値で再現するときに使います。「babyblue」はCSS（Webページの見た目を指定するスタイルの仕組み）の標準色名ではないため、HEXで指定すると確実です。

ベビーブルー■#89CFF0に白■#FFFFFFの文字を載せた場合、コントラスト比（色同士の明るさの差）は約1.71:1で、通常の文章に必要な差がありません。代わりに濃いネイビー■#203A57なら約6.79:1、青みを含んだ濃いグレー■#253743でも約7.18:1です。明るい青は背景として使い、文字は濃い色で支えると整理しやすくなります。

ベビーブルーを使った2つのバナー配色例

親子向け体験会：ベビーブルーを広い背景に使う

横長の体験会バナーでは、全体の背景にベビーブルー■#89CFF0、大きなタイトルにネイビー■#203A57、補足文に濃いグレー■#253743を使います。日付や会場はオフホワイト■#FAFCFEの情報欄にまとめ、文字はネイビーに統一すると約11.32:1のコントラストが得られます。情報欄を作ると、青い背景を広く残しながら日時を整理できます。

オフホワイトとベビーブルーの差は約1.67:1なので、情報欄の境界が必要なら灰青■#566B7Aの線を加えます。この線とベビーブルーの比は約3.24:1です。申込みボタンは深い青緑■#16566Bに白■#FFFFFFの文字を載せると約8.15:1、ボタンとベビーブルー背景の差も約4.75:1になります。背景・案内欄・申込み先を色と配置で分ける例です。

新商品紹介：白い余白にベビーブルーを部分的に使う

正方形の商品紹介バナーでは、商品写真を置く領域をオフホワイト■#FAFCFEにして、ベビーブルー■#89CFF0は新商品の特徴を示す短い帯に限定します。商品名と説明はネイビー■#203A57で統一すると、オフホワイト上の文字との比は約11.32:1、ベビーブルーの帯の文字との比も約6.79:1です。淡い青を小さく使うことで、写真の色が主役になりやすい構成です。

商品詳細ボタンには、青と色みが異なる落ち着いた赤茶■#A14D4Aを選び、白■#FFFFFFの文字を載せます。文字との比は約5.71:1、オフホワイトの周囲との比は約5.56:1です。赤茶はボタン一つに絞り、特徴の帯と競合させないようにします。背景と帯の差は約1.67:1と小さいため、帯の意味は「新商品」などの文字でも伝えます。

淡い背景で読みにくくならないための確認

バナーの幅を小さくすると、文字が写真の上にはみ出したり、情報欄と背景がつながって見えたりすることがあります。見出し・日付・ボタンを実際の表示サイズで確認し、必要なら写真の上ではなく単色の領域へ文字を移します。重要な情報を色の違いだけで示さず、余白・枠・短いラベルを組み合わせましょう。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常の文字と背景のコントラスト比は4.5:1以上、大きな文字は3:1以上が基準です。操作部品の識別に必要な見た目の情報には、隣接色との3:1以上が求められる場合もあります。HueRollではHEXから関連色や配色候補を調べ、選択色と白・黒との比を確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定はできないため、完成したバナーの色の組み合わせは別途検証してください。