ダスティローズとネイビーの配色例｜見出しと装飾を色分けする
ダスティローズは灰色を帯びた落ち着いたピンクの呼び名です。ネイビーと合わせるときは、両方の色を文字や飾りに同じように使うより、見出しと装飾の担当を分けると情報を整理しやすくなります。この記事ではダスティローズ#B47D8Aとネイビー#26344Eを使い、花の定期便を紹介するWebバナーの配色を考えます。どちらの色名もHEXコードが一つに決まっているわけではなく、ここでは制作例として色を指定します。HEX（ヘックス）はWebの色を6桁の英数字で表すコードです。
見出しはネイビー、装飾はダスティローズを基本にする
ネイビー#26344Eは暗い青なので、明るい背景の見出しや本文に使うと大きな明暗差を作れます。一方、ダスティローズ#B47D8Aは青に比べて明るく、鮮やかさを抑えた赤系統の色です。見出しにネイビー、見出し脇の短い線や小さな円などの装飾にダスティローズを割り当てると、言葉を読む場所と雰囲気を添える場所を区別できます。
ここで大切なのは、ローズ色の線に重要な情報を背負わせないことです。飾りの形が見えなくても「季節の花を届けます」「申込受付中」といった文章だけで内容が伝わるようにします。写真の色が多い場合も、装飾を足す前に見出しの周りへ余白を設けると、視線が散りにくくなります。
背景の明るさを変えた2つのバナー配色例
例1：明るい背景の特集バナー。背景をアイボリー#FAF6F0、見出し「季節の花を、暮らしに」をネイビー#26344Eにします。両色のコントラスト比は約11.59:1です。コントラスト比とは、文字と背景など隣り合う色の明るさの差を表す数値です。開催期間などの本文もネイビーにそろえ、見出しの左脇と下部にダスティローズ#B47D8Aの短い飾り線を置きます。線と背景の比は約3.13:1ですが、文章を区切る唯一の手段にはせず、見出しと余白でもまとまりを作ります。
「お届けプランを見る」ボタンはネイビー#26344Eを背景に、アイボリー#FAF6F0の文字を載せます。文字とボタンの比は約11.59:1で、明るいバナーの中でも操作する場所を分けられます。ダスティローズはボタン内の小さな文字ではなく、周囲の装飾に留めます。
例2：濃い背景の申込案内バナー。背景をネイビー#26344Eにして、見出しや開催案内の文字をアイボリー#FAF6F0に切り替えます。この文字の組み合わせも約11.59:1です。見出しの周囲にダスティローズ#B47D8Aの小さな丸や短い曲線を添えると、装飾と背景の差は約3.71:1になります。装飾を増やしすぎず、文字に重ならない位置へ離して配置します。
申込ボタンはアイボリー#FAF6F0の背景にネイビー#26344Eの文字を使い、約11.59:1を確保します。背景が濃くなっても、重要な文字と操作部分には明るさの差を優先し、ローズ色は補助的な飾りとして残す構成です。
ローズ色の文字と細すぎる線に注意する
ダスティローズ#B47D8Aをアイボリー#FAF6F0の背景に文字として置くと約3.13:1、ネイビー#26344Eの背景では約3.71:1です。どちらも通常サイズの文字に必要な4.5:1には届きません。どうしても淡い背景上の見出しをローズ系にしたい場合は、濃く調整したローズ#87505Fを使うとアイボリーとの比は約5.83:1になります。
WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上を求めています。意味のある図形や操作部品を見分けるための表示には隣接色と3:1以上が必要な場合がありますが、単なる飾りに一律の基準があるわけではありません。細い線は計算上の比率を満たしても画面上では薄く見えることがあるため、太さと表示サイズも確かめます。
HueRollはHEXコードを入力して色を確かめられ、選択色と白・黒とのコントラストを表示できます。任意の2色の比較やAAの自動判定はできないため、この記事のような背景・見出し・装飾の組み合わせは別途確認してください。