オレンジのボタンを使うWEBデザイン｜明るさを活かす色合わせ

TIPS

オレンジのボタンは明るさを活かせる一方、薄い背景になじみすぎたり、白い文字が読みにくくなったりすることがあります。申込みや資料請求に誘導するCTA（Call To Action：次の行動を促すボタン）を例に、ボタンの色だけでなく、文字・周囲の背景・輪郭を一緒に決める方法を紹介します。

明るいオレンジほど、文字色とボタンの境界を意識する

オレンジだから必ず目立つわけではありません。同じオレンジでも、周囲が白っぽいとボタンの面が背景に溶け込み、暗い背景では輪郭がはっきりする場合があります。まず、ボタンの文字が読めるか、次に押せる範囲が分かるかを別々に確認しましょう。

たとえば明るいオレンジの背景に白文字を載せると、色合いは華やかでも明るさの差が不足することがあります。その場合は、オレンジを無理に暗くする前に文字を濃くする方法があります。逆に白文字を使いたければ、ボタンのオレンジを深め、文字との明るさの差を確保します。

イベント申込みと資料ダウンロード、2つの配色例

ここで使うHEXコードは、色を16進数の記号で指定するWEBカラーの形式です。色の役割を固定しておくと、ボタンだけが浮いたり、本文の色が競合したりするのを防ぎやすくなります。

1．明るいボタンを使うイベント申込みページ

ページ背景：青みのある淡いグレー ■#F6F8FB。本文文字：濃いブルーグレー ■#253343。文字と背景のコントラスト比は約12.09:1です。
「参加を申し込む」ボタン：明るいオレンジ ■#FFB347、ボタン文字：濃いブラウン ■#2D251E。文字とボタンのコントラスト比は約8.45:1です。
ボタンの輪郭：ダークブラウン ■#713D10。オレンジの面とは約4.96:1、ページ背景とは約8.30:1の差があるため、2px程度の枠線として使う案です。

このオレンジとページ背景の差は約1.67:1しかありません。塗り色だけで輪郭を示そうとせず、濃い枠線と「参加を申し込む」という文字でボタンだと伝えます。白文字を合わせた場合の比率は約1.78:1なので、通常サイズのボタン文字には向きません。

2．濃いオレンジを使う資料ダウンロードページ

ページ背景：温かみのあるオフホワイト ■#FFF9F2。本文文字：濃いブルーグレー ■#253343。コントラスト比は約12.30:1です。
「資料を受け取る」ボタン：深いオレンジ ■#A84312、文字：白 ■#FFFFFF。文字とボタンは約6.04:1、ボタンとページ背景は約5.78:1です。

こちらはボタン自体と周囲にも十分な明るさの差を持たせた例です。明るいオレンジを使う例とは異なり、白文字を選んでも文字のコントラストを確保できます。どちらが適切かは、ページ全体の色とボタンの用途で決めます。

ホバー・フォーカス・スマホ操作でも区別できるようにする

ホバーはマウスを重ねた状態、フォーカスはキーボードなどで操作対象になった状態です。明るいボタンをホバー時に少し濃いオレンジ ■#EF9934へ変える場合も、濃い文字 ■#2D251Eとの比率は約6.65:1で、枠線 ■#713D10を残せます。濃いボタンではホバー色に ■#923A0Cを使うと、白文字 ■#FFFFFFと約7.41:1になります。

フォーカスでは色の変化だけに頼らず、ボタンから少し離した濃い青の輪郭 ■#183E59を付ける方法があります。これは淡いグレー背景 ■#F6F8FBに対して約10.54:1、オフホワイト背景 ■#FFF9F2に対して約10.73:1です。スマホにはホバーがないため、文字・形・タップ後の状態も確認しましょう。

WCAG（ウェブコンテンツを利用しやすくするための国際的な指針）2.2のAA基準では、通常の文字と背景には4.5:1以上、大きな文字には3:1以上のコントラスト比が求められます。ボタンを識別するのに必要な輪郭や操作状態を示す表示には、隣接色との3:1以上が目安ではなく基準となります。ただし、すべてのボタンに枠線が必須という意味ではありません。文字の読みやすさと操作場所の分かりやすさを、それぞれ実際の画面で確かめてください。