オレンジと水色はどう合わせる？バナーの背景とボタンを色分けする

オレンジと水色は、親しみやすい告知バナーを作りたいときの候補になります。ただし、両方を大きな面積で鮮やかに使うと、見出しと申込ボタンのどちらを見てほしいのか曖昧になることがあります。背景をどちらの色にするかで、ボタンに必要な濃さや枠線も変わります。架空の「親子ものづくり体験」の募集バナーを例に、二つの色分けを比較します。

背景を広く使い、ボタンは色相だけでなく明暗差で分ける

まず、水色とオレンジのどちらを背景にするかを決めます。水色を背景にする場合は明るく淡い色を広く使い、オレンジを濃くして申込ボタンに集める方法があります。逆にオレンジを背景にする場合は、淡い水色のボタンだけでは輪郭が見えにくくなるため、濃い枠線を加えると役割を分けやすくなります。

色相とはオレンジや青などの色みの違いです。二色の色相が離れていても、明るさが似ていれば境界や文字が見えやすいとは限りません。文字と背景の明るさの差を表すコントラスト比も確認します。ここで示す「#」から始まる6桁のHEXコードは、Webで色を指定する表記です。

また、CTAとは「申し込む」など、読者に次の行動を促すボタンや案内のことです。バナーの目的が参加申込みなら、背景よりもCTAの場所が分かる配色を優先し、単なる飾りには強い色を使いすぎないようにします。

親子向けワークショップの募集バナーで比較する

水色背景に濃いオレンジの申込ボタン

背景を淡い水色の■#E8F5FAにし、見出し「親子ものづくり体験」は濃い青灰色の■#243947、日時や対象年齢は■#334B57にします。背景との文字コントラスト比は順に約10.78:1、8.26:1です。水色の面積を広く取り、文字を濃くすることで、情報を読む部分を整理します。

「参加を申し込む」ボタンには濃いオレンジの■#AD4918、文字には白の■#FFFFFFを使います。ボタン内の文字の比は約5.61:1、ボタンのオレンジと周囲の水色■#E8F5FAとの比は約5.04:1です。ボタンはバナーの下側など一か所にまとめ、オレンジの装飾を増やしすぎないようにします。

オレンジ背景に淡い水色の申込ボタン

背景をやわらかいオレンジの■#F4B77Dにしたい場合は、見出しを濃い茶色の■#3B2A24、案内文を■#44322Bにします。文字と背景の比は約7.72:1、6.86:1です。オレンジの明るさを活かしつつ、文字まで白くしないのがポイントです。

ボタン背景を淡い水色の■#D9F2FAにすると、オレンジ背景■#F4B77Dとの比は約1.51:1しかありません。そこでボタンの文字と2px程度の輪郭線を濃い青の■#173C50にそろえます。青い文字とボタン内部の水色は約10.03:1、輪郭線と周囲のオレンジは約6.63:1です。淡いボタンの色だけに頼らず、押せる領域を形でも示せます。

小さな文字と操作場所を実際の組み合わせで確認する

オレンジ背景■#F4B77Dに白文字■#FFFFFFを載せた場合の比は約1.76:1で、通常の案内文には不十分です。水色背景に白文字を重ねる場合も同様に、色みだけで判断しないことが大切です。

WCAG（Web Content Accessibility Guidelines、Webコンテンツの利用しやすさに関する指針）2.2のレベルAAでは、通常サイズの文字と背景に4.5:1以上、規定の大きな文字には3:1以上の比が必要です。操作部品を見分けるために不可欠な輪郭線などにも、隣接する色との3:1以上が原則求められます。一方、すべての装飾線に同じ基準が必要なわけではありません。

スマートフォン向けに縮小したときは、日時や対象年齢が埋もれないか、申込ボタンの文字と輪郭が見えるかを確かめます。写真や半透明の色を重ねる場合は、実際に接する色でも再確認してください。ここに示した比率は不透明な色同士を別途計算した値で、バナー全体の適合を保証するものではありません。

HueRollではHEXコードから配色や濃淡の候補を見比べ、選んだ色と白・黒のコントラストを確認できます。ただし、任意の2色間の比較やAA判定の自動表示には対応していません。まず背景とボタンの役割を決め、文字・輪郭線・余白で違いを補うと、オレンジと水色を無理なく組み合わせられます。