青いボタンを使うWEBデザイン｜背景色との組み合わせ方

TIPS

青いボタンはWEBサイトでよく使われますが、どの背景にも同じ青を置けばよいわけではありません。白に近い背景では濃い青、濃紺の背景では明るい青を選ぶなど、周囲との明るさの差が大切です。オンライン講座の申込みページを例に、背景・文字・ボタンの組み合わせを具体的に整理します。

青いボタンは背景の明るさに合わせて選ぶ

申込みなど次の行動を促すボタンは、CTA（Call To Action：行動を促す案内）と呼ばれます。CTAを青にする場合は、青の鮮やかさだけでなく、ボタンと背景の境界、ボタン上の文字色も確認しましょう。コントラスト比とは、2色の相対的な明るさの差を示す数値です。大きいほど明るさの差が強くなります。

白や淡い水色の上では、深い青に白文字を合わせる方法があります。一方、濃紺の上では青を明るくして、文字を濃紺に変える方法が考えられます。「青は白文字と組み合わせる」と固定せず、背景ごとに濃淡と文字色を決めることがポイントです。

オンライン講座ページの背景別・3つの配色例

色の指定にはHEX（16進数で色を表すWEB用のカラーコード）を使います。講座の説明、比較カード、濃色の案内枠という3つの場所で、青いボタンの見せ方を変えてみます。

白に近い講座紹介ページ

ページ背景：明るいグレー ■#F8FAFC。見出し・本文：濃いブルーグレー ■#243247。文字と背景のコントラスト比は約12.37:1です。
「この講座に申し込む」ボタン：深い青 ■#1D4ED8に白文字 ■#FFFFFF。文字とボタンの比率は約6.70:1、ボタンとページ背景 ■#F8FAFCの比率は約6.41:1です。

青い面と周囲の明るさに差があるため、輪郭を色だけに頼ってもボタンを区別しやすい組み合わせです。ただし、押せることは「申し込む」という文言や形でも伝えます。

淡い水色の講座比較カード

カード背景：淡い水色 ■#EBF3FF。説明文：濃いブルーグレー ■#243247で、コントラスト比は約11.59:1です。
「日程を選ぶ」ボタン：先ほどと同じ深い青 ■#1D4ED8に白文字 ■#FFFFFF。文字の比率は約6.70:1、ボタンとカード背景 ■#EBF3FFは約6.00:1です。
補足の「受講内容を見る」は、カード背景 ■#EBF3FFに深い青 ■#1D4ED8の下線付き文字リンクとして配置します。文字と背景は約6.00:1です。すべてを塗りボタンにせず、操作の優先順位を分けます。

濃紺の無料体験案内

案内枠の背景：濃紺 ■#10253D。見出し・説明文：明るいグレー ■#E5EDF6。文字と背景の比率は約13.13:1です。
「無料体験を予約」ボタン：明るいブルー ■#93C5FD、文字：濃紺 ■#10253D。文字とボタン、ボタンと周囲の濃紺の比率はどちらも約8.60:1です。

明るいボタン色を白っぽいページに移すと、ページ背景 ■#F8FAFCとの比率は約1.72:1まで下がります。同じ青いボタンを無理に全背景で共用せず、背景に合わせて明るさを切り替えます。

文字色・ホバー・フォーカスの確認を忘れない

濃紺の案内枠で使った明るいブルー ■#93C5FDに白文字 ■#FFFFFFを載せると、文字の比率は約1.80:1しかありません。明るい青ほど白文字が合うとは限らないため、必ずボタンの面と文字を一組で確認します。

ホバー（マウスを重ねた状態）では、明るいページの青いボタンを濃い青 ■#1E40AFに変え、白文字 ■#FFFFFFと約8.72:1を保てます。濃紺の案内枠なら、ボタンをさらに淡い青 ■#BFDBFEにし、濃紺文字 ■#10253Dと約10.91:1を確保する例があります。

フォーカス（キーボードなどで操作対象になった状態）は、色の変化だけでなく、ボタンから少し離した輪郭でも示します。淡いページでは濃い青 ■#162D52の輪郭が背景 ■#F8FAFCと約13.11:1、濃紺の案内枠では白 ■#FFFFFFの輪郭が背景 ■#10253Dと約15.51:1です。輪郭を2px程度の太さにし、ボタンとの間に隙間を取る方法が考えられます。

WCAG 2.2（ウェブコンテンツのアクセシビリティ指針）のAA水準では、通常サイズの文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。ボタンの存在や操作状態を示すのに必要な非テキストの表示には、隣接色との3:1以上が求められます。スマートフォンには通常のホバー操作がないため、文字・形・タップ後の反応も実際の画面で確かめましょう。