CTAボタンが埋もれる原因は？色のコントラストを改善する方法

レンタル会議室の料金ページで「空き状況を確認」ボタンを置いたのに、料金表や「設備を見る」ボタンの中に埋もれてしまうことがあります。CTA（Call to Action、予約や申込みなど次の行動を促す主要ボタン）は、色を鮮やかにするだけでは目立ちません。ボタンと周囲の背景、ボタン内の文字、補助操作との違いを順に確認する方法を紹介します。

CTAが埋もれるときに確認する3つのコントラスト

まず、ボタン自体と直後ろの背景色を比べます。淡い青緑の案内欄に、同じような明るさの青緑ボタンを置くと、塗りつぶした形が見分けにくくなることがあります。別の色相を選んでも、明るさの差が小さければ十分ではありません。

次に、ボタンの文字とボタンの塗り色を確認します。ボタンの形が分かっても「空き状況を確認」と読めなければ、行動につながりません。コントラスト比は、隣り合う2色の相対的な明るさの差を表す数値です。背景に対するボタンの比と、文字に対するボタンの比は、別々に調べます。

最後はほかの操作との強弱です。「設備を見る」と「空き状況を確認」が同じ大きさ・同じ塗りボタンだと、両方が同程度に目立ってしまいます。主要CTAを塗りボタンにし、補助操作は下線付きの文字リンクにするなど、形とラベルでも違いを付けると目的が伝わりやすくなります。どの操作が重要かは、そのページで利用者が次に何をしたいかに応じて決めます。

会議室の料金ページで主要CTAと補助操作を整理する

料金と収容人数を白いカード■#FFFFFFに載せ、外側のページ背景をごく薄いグレー■#F5F7F6、空き状況の案内欄を淡い青緑■#DCEBE6にした例です。見出しは濃い青灰色■#233942、本文は落ち着いた青灰色■#3D5159を使います。各色のHEX（赤・緑・青の成分を16進数で示すWEBカラーコード）を、改善前後で比べます。

改善前はCTA背景■#8DB9ACと案内欄■#DCEBE6の比が約1.77:1で、ボタンの輪郭が埋もれやすい組み合わせです。さらに白文字■#FFFFFFとCTA背景■#8DB9ACは約2.17:1にとどまります。「設備を見る」ボタンの淡い緑■#9FBFB5も周囲の案内欄■#DCEBE6と約1.61:1で、主要操作との役割の違いが弱い状態です。

改善後は、濃い青緑のCTA■#205B65と淡い案内欄■#DCEBE6が約6.22:1、白いCTA文字■#FFFFFFとの比が約7.65:1になります。補助リンクの濃い青灰色■#31565Eと案内欄■#DCEBE6も約6.51:1です。申込みに向かう操作を塗りボタンとして強く示し、設備の説明を読む操作は下線で区別します。

CSS（WEBページの見た目を指定するスタイルの書き方）で設定するなら、主要操作と補助操作を別のクラスで管理すると変更しやすくなります。

.booking-cta {
  background-color: rgb(32 91 101);
  color: rgb(255 255 255);
  border: 2px solid rgb(32 91 101);
  padding: 12px 20px;
  border-radius: 6px;
}
.plan-details {
  background: transparent;
  color: rgb(49 86 94);
  text-decoration: underline;
}
.booking-cta:focus-visible {
  outline: 3px solid rgb(20 58 67);
  outline-offset: 3px;
}

文字・操作の境界・フォーカスを別々に確認する

WCAG（Web Content Accessibility Guidelines、WEBコンテンツのアクセシビリティに関する指針）2.2では、通常サイズの文字と背景に原則4.5:1以上、大きな文字には3:1以上が必要です。改善後のCTA文字と背景は通常文字の数値基準を満たしますが、改善前の2.17:1は満たしません。料金の見出し■#233942と白いカード■#FFFFFFは約12.10:1、説明文■#3D5159と白いカード■#FFFFFFは約8.33:1です。

操作部品を識別するために必要な輪郭などの視覚情報には、隣接色に対して原則3:1以上の非テキストコントラストが求められます。ただし、すべてのボタンに一律3:1の塗り面が必須という意味ではなく、ラベルや形で操作が分かる場合もあります。今回のCTAは塗り面を主要な目印にする設計なので、背景との差を十分に確保します。料金カードの枠線■#6A7F80は白い内側■#FFFFFFと約4.23:1、外側の薄いグレー■#F5F7F6と約3.93:1です。

キーボードで操作するときは、現在選択している場所を示すフォーカスの輪郭も消さないようにします。案内欄■#DCEBE6の上に、ボタンから少し離した暗い青緑の輪郭■#143A43を置く場合、両色の比は約9.95:1です。ただし、数値を満たすだけでCTAが必ず見つかるわけではありません。スマートフォンで料金説明、主要CTA、補助リンクの順を確認し、「空き状況を確認」と具体的に書かれているかも確かめましょう。

HueRollでは基準色のHEXや関連する濃淡、選択色と白・黒とのコントラストを確認できます。ただし任意の2色を直接比べる機能やAA・AAAの自動判定はありません。この記事の案内欄・ボタン・文字の組み合わせは別途計算しています。