オレンジとチャコールグレーの配色｜ボタンを主役にする色使い

オレンジのボタンを目立たせたいときは、周囲をチャコールグレーで引き締める方法があります。ただし、同じオレンジでも暗い背景と明るい背景では見え方が変わります。大切なのは色の組み合わせだけでなく、ボタンを置く場所と文字色まで決めることです。この記事では、オンライン講座の案内ページを例に、ボタンを主役にする配色を紹介します。

チャコールグレーを広く使い、オレンジを主要ボタンに絞る

今回はオレンジを■#F5A03D、チャコールグレーを■#30343Bとします。色名によって唯一の色コードが決まるわけではなく、記事内で比較するために選んだ色です。HEX（ヘックス）は、Webで使う色を「#」と6桁の英数字で表すカラーコードです。

チャコールグレーは黒に近い暗い灰色なので、大きめの背景に使うと明るいオレンジが際立ちやすくなります。そこでオレンジは「無料体験に申し込む」など、読者に行動してほしい主要ボタンへ優先して使います。見出しの下線や装飾までオレンジで増やすと、ボタンと同じ強さの目印が並び、何を押せばよいか分かりにくくなる場合があります。

もう一つの基本は、明るいオレンジの上に安易に白文字を置かないことです。ボタンの文字はチャコールグレーの■#30343Bにし、背景のオレンジ■#F5A03Dと明るさに差を付けます。

同じオレンジのボタンを暗い背景と明るい背景で使い分ける

オンライン講座の案内ページで、冒頭の申込案内と、詳しい説明の後に置くボタンを比べてみます。

• 冒頭の案内エリア：背景をチャコールグレー■#30343B、講座名と説明文を白■#FFFFFFにします。「無料体験に申し込む」ボタンにはオレンジ■#F5A03Dを使い、ボタン文字はチャコールグレー■#30343Bにします。暗い面の中で明るいボタンだけが目に入りやすい構成です。
• 講座内容の説明エリア：背景を温かみのあるオフホワイト■#F8F7F3、見出しと本文をチャコールグレー■#30343Bにします。ここにも同じオレンジ■#F5A03Dの申込ボタンを置けますが、ボタンの外側にチャコールグレー■#30343Bの2px程度の枠線を付け、明るい背景との境目をはっきりさせます。
• 補助的な案内：「講座内容を詳しく見る」などのリンクは、オフホワイト■#F8F7F3上にチャコールグレー■#30343Bの下線付き文字で表示します。主要ボタンと同じオレンジを使わず、操作の優先順位を分けます。

上下の申込ボタンで色やラベルの役割をそろえると、ページ内で同じ行動を案内していることが伝わりやすくなります。装飾用のオレンジは控え、文字・余白・ボタンの形でも重要度を示すことがポイントです。

文字だけでなくボタンと周囲の色の差も確認する

コントラスト比とは、隣り合う色の相対的な明るさの差です。オレンジ■#F5A03Dとチャコールグレー■#30343Bの比は約5.94:1なので、暗い背景に置いたボタンの面が区別しやすく、同じチャコールグレーをボタン文字に使った場合も約5.94:1になります。

一方、オレンジ■#F5A03Dとオフホワイト■#F8F7F3の差は約1.96:1にとどまります。文字の内容だけでなくボタンの輪郭を明確にしたい場合、枠線のチャコールグレー■#30343Bとオフホワイト■#F8F7F3なら約11.66:1の差があります。

文字では、白■#FFFFFFとチャコールグレー■#30343Bが約12.50:1、チャコールグレー■#30343Bとオフホワイト■#F8F7F3が約11.66:1です。逆に、白■#FFFFFFとオレンジ■#F5A03Dは約2.10:1で、WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAが通常サイズの文字に求める4.5:1を満たしません。操作に必要なボタンの輪郭など、非テキスト情報には隣接色と3:1以上の基準があります。

キーボード操作時には、選択中のボタンを示す輪郭も別途設けましょう。例えば暗い背景ではボタンから少し離した白い輪郭線、明るい背景では濃い輪郭線を使い、色の変化だけに頼らず操作位置を示します。完成後はスマートフォン表示でも、ボタンと背景、文字とボタンの組み合わせを確認してください。