CTAボタンに合う色は？背景とのコントラストから考える選び方

TIPS

CTAボタンには青や赤などさまざまな候補がありますが、「この色なら必ず目立つ」という正解はありません。CTA（Call To Action）とは、申込みや購入など次の行動を促す案内のことです。ボタンの色は、すぐ隣の背景と文字色をセットにして選びましょう。ここでは陶芸体験の予約ページを想定し、明るい背景・淡い色の背景・暗い背景の3案を比較します。

背景との明るさの差と、ボタン文字の読みやすさを分けて考える

最初にボタンを置く場所の背景色を決め、次にボタンの塗り色と文字色を組み合わせます。コントラスト比は、2色の相対的な明るさの差を表す数値です。明るい背景では深い色のボタン、暗い背景では明るい色のボタンを候補にすると、操作する場所を見つけやすくできます。

ただし、ボタン自体が背景から見分けられても、ボタンの「体験を予約する」が読めなければ役割を果たせません。塗り色とページ背景、文字色と塗り色を別々に確認します。色の印象だけで決めず、ボタンの大きさや配置、周囲にある強調表示の数も合わせて考えましょう。

陶芸体験の予約ページに使う背景別の3つの配色

以下は同じ「体験を予約する」ボタンを、異なるデザインのページに配置する場合の代替案です。1ページに3種類の主要ボタンを並べる提案ではありません。色はHEX（16進数でWEB上の色を指定するコード）で示します。

1．オフホワイト背景：深い青緑のボタン

ページ背景はオフホワイト ■#FAF9F6、見出し・本文は濃いグレー ■#263238。文字と背景のコントラスト比は約12.50:1です。
予約ボタンは深い青緑 ■#126454、文字は白 ■#FFFFFF。文字とボタンの比率は約7.06:1、ボタンとページ背景 ■#FAF9F6は約6.70:1です。

無彩色に近い背景へ青緑を少量置く案です。作品写真の色を大きく見せたいページでも、ボタンだけに濃い色の役割を与えられます。

2．淡いピーチ背景：濃い赤紫のボタン

案内面の背景は淡いピーチ ■#F8E9DA、見出し・本文はダークブラウン ■#382F2A。文字と背景の比率は約10.98:1です。
予約ボタンは濃い赤紫 ■#80355Aに白文字 ■#FFFFFF。文字とボタンは約8.16:1、ボタンとピーチ背景 ■#F8E9DAは約6.86:1です。

背景とボタンの両方が赤みを含むため、色調を大きく変えずに明暗差を付けたい場合の候補です。

3．暗い背景：明るい黄系のボタン

告知エリアの背景は濃いブルーグレー ■#1E2A38、説明文は明るいグレー ■#EEF2F4。文字と背景は約12.91:1です。
予約ボタンは明るいアンバー ■#F8C670、文字は背景と同じ濃いブルーグレー ■#1E2A38。文字とボタン、ボタンと周囲の暗色背景はどちらも約9.22:1です。

暗い背景で明るいボタンを使う場合は、白文字に固定しないことが重要です。アンバー ■#F8C670に白文字 ■#FFFFFFを合わせると約1.58:1にしかならず、通常サイズの文字には不十分です。

背景を変えたら、輪郭・操作状態・成果も確認する

明るいアンバー ■#F8C670を淡いピーチ背景 ■#F8E9DAへそのまま移すと、ボタンと背景の比率は約1.33:1まで下がります。同じ色が別の場所でも目立つとは限りません。色を変えないなら、必要に応じて濃い輪郭を加えるか、周囲の面を変える方法を検討します。

ホバー（マウスを重ねた状態）では、青緑のボタン ■#126454を濃い青緑 ■#0C5349に変えると、白文字 ■#FFFFFFとの比率は約8.94:1です。暗い背景のアンバーを少し深い色 ■#E8B15Dに変えても、濃い文字 ■#1E2A38との比率は約7.54:1を保てます。

フォーカス（キーボードなどで操作する位置になった状態）は、ボタンから少し離した2px程度の輪郭でも示します。明るい背景には濃い青 ■#204A68の輪郭を使うと、オフホワイト ■#FAF9F6と約8.90:1、ピーチ背景 ■#F8E9DAと約7.88:1です。暗い背景 ■#1E2A38では白 ■#FFFFFFの輪郭が約14.55:1になります。

WCAG 2.2（Web Content Accessibility Guidelines：ウェブの利用しやすさに関する指針）のAA水準では、通常サイズの文字と背景に原則4.5:1以上、操作の識別に必要な非テキストの表示には隣接色と3:1以上のコントラスト比が求められます。すべてのボタンに枠線が必須という意味ではありません。実際の画面では、文字・ボタンの位置・キーボード操作・スマートフォンでのタップ後の状態を確認しましょう。色を変えた効果を知りたい場合は、クリックだけでなく予約完了も同じ条件で比較します。