青いCTAとオレンジのCTAはどう見える？背景別に配色を比較
申込みボタンを青とオレンジのどちらにするか迷ったとき、「青なら信頼される」「オレンジなら必ず目立つ」と色名だけで決めるのは避けたいところです。CTA（Call To Action：申込みや予約など次の行動を促すボタン）の見え方は、周囲の背景色や同じ画面にあるほかの色によって変わります。オンライン料理教室の「体験レッスンを予約」ボタンを例に、白・淡い青・淡い暖色・濃紺の背景で比較します。
青とオレンジの優劣より、背景との関係を確認する
白い背景では、濃い青も濃いオレンジもボタンの色面を区別しやすい候補になります。淡い青の背景なら、青は同系色としてまとまりやすく、オレンジは色相（青・橙など色の種類）の違いで変化を作れます。淡いオレンジ寄りの背景ではその関係が逆になり、青の方に色相差が生まれます。
ただし、色相が異なるから必ずボタンが見つけやすいわけではありません。背景とボタンの明るさの差、ボタンの面積、文字、周囲の余白も合わせて判断します。青とオレンジのどちらが予約率を高めるかも、色だけで一律に決められるものではありません。
比較するときは、同じ大きさ、同じ文言、同じ配置のボタンを一つずつ置き、色以外の条件をそろえます。主要CTAを同時に2色並べると、どちらが最重要なのか分かりにくくなるため、完成する画面では主要操作の色を統一する方が整理しやすくなります。
4種類の背景で青いCTAとオレンジのCTAを比較
オンライン料理教室の体験申込みページで、ボタンのラベルはどちらも「体験レッスンを予約」とします。HEXコードはWEBで色を16進数の文字で指定する形式です。次の比率は「塗りつぶしたボタン色」と、その外側の背景色とのコントラスト比です。ボタン上の文字と背景の比率とは分けて考えます。
| 周囲の背景 | 青いCTA | オレンジのCTA | ボタン文字 | 色面と背景の比（青／橙） |
|---|---|---|---|---|
| 白い説明エリア #FFFFFF | #1B5E91 | #A85008 | #FFFFFF | 6.87:1 ／ 5.50:1 |
| 淡い青の案内エリア #EAF3F9 | #1B5E91 | #A85008 | #FFFFFF | 6.11:1 ／ 4.90:1 |
| 淡い暖色の案内エリア #FFF0E3 | #1B5E91 | #A85008 | #FFFFFF | 6.16:1 ／ 4.93:1 |
| 濃紺の申込みエリア #182B41 | #8BC7F2 | #FFC38A | #182B41 | 7.91:1 ／ 9.19:1 |
白 #FFFFFF のエリアでは、青 #1B5E91 が外側と約6.87:1、オレンジ #A85008 が約5.50:1です。淡い青 #EAF3F9 の背景では、青が約6.11:1、オレンジが約4.90:1になります。オレンジは青系の背景と色相が異なりますが、明暗差を表すコントラスト比では青の方が大きい例です。
淡い暖色 #FFF0E3 の背景では青が約6.16:1、オレンジが約4.93:1です。オレンジは背景の色相に近いため、ほかの装飾まで暖色でそろえるなら、ボタンの周囲に余白を確保するなどして役割を分けます。これら3つの明るい背景では、青 #1B5E91 と白文字 #FFFFFF が約6.87:1、オレンジ #A85008 と白文字が約5.50:1で、通常サイズの文字にも必要な明暗差があります。
濃紺 #182B41 の背景に同じ濃い青 #1B5E91 とオレンジ #A85008 を置くと、色面と背景の比はそれぞれ約2.09:1、約2.61:1まで下がります。ボタンの色面が操作部品の識別に必要なら、境界が弱くなる組み合わせです。そこで明るい青 #8BC7F2 または明るいオレンジ #FFC38A に切り替え、文字は濃紺 #182B41 にします。文字とボタンの比はそれぞれ約7.91:1、約9.19:1で、ボタン色と周囲の濃紺との差も同じ比率です。
文字色・周囲の色・CTAの数を最後に調整する
濃紺背景用の明るい青 #8BC7F2 と明るいオレンジ #FFC38A に、白文字 #FFFFFF をそのまま載せてはいけません。文字との比は約1.82:1、約1.56:1となり、通常の文字には不足します。暗い文字へ切り替えるところまでを一組の配色として扱います。
説明文には、白・淡い青・淡い暖色の背景上で濃い青灰 #283747 を使うと、それぞれ約12.15:1、約10.82:1、約10.90:1です。濃紺 #182B41 の部分では明るい文字 #F4F8FC に変えれば約13.47:1です。文字の組み合わせを決めたうえで、ボタンの大きさ、周囲の余白、ラベルの明確さも確認します。
WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常文字と背景のコントラスト比は4.5:1以上、規定の大きな文字は3:1以上が基準です。また、操作部品を識別するために必要な視覚情報には、隣接色と3:1以上が求められます。ただし、文字でボタンを識別できる場合など、すべてのボタンの色面に同じ線の基準が適用されるわけではありません。今回の比率は不透明な単色同士の計算値で、実際のクリック率や画面全体の基準適合を示すものではありません。
HueRollではHEX入力、濃淡候補、選択した色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定はできないため、背景とCTAの色面との比率は別の方法で検証します。青・オレンジのどちらかを選んだら、スマートフォンでも背景との区別と文字の読みやすさを確かめましょう。