インディゴとオレンジはどう使う？ボタンが目に入る配色の考え方

インディゴとオレンジを組み合わせると、落ち着いた青紫の中に明るい色を添えられます。ただし、オレンジのボタンをどこに置いても目立つとは限りません。ボタンの背景色と文字色だけでなく、その周囲の色を一緒に決めることが大切です。イベントの申込み画面と料金プランの案内画面を例に使い分けを紹介します。

ボタンの色は、周囲の背景との明るさの差で決める

ここでは深い青紫のインディゴ■#29356Fと、明るいオレンジ■#F5A43Eを配色例として使います。色名には幅があり、これらは唯一の決まった値ではありません。HEX（16進数でWebの色を指定するコード）を使うと、背景・文字・ボタンを同じ色で管理できます。

この2色のコントラスト比（色同士の明るさの差）は約5.60:1です。インディゴを背景にしてオレンジのボタンを置けば、ボタンの面を区別しやすくなります。ただしボタン内の文字も別に考えます。オレンジと白■#FFFFFFの比は約2.05:1で通常の文字には不足します。オレンジの上では濃いインディゴの文字を使い、約5.60:1を確保する方法があります。

背景によって変える2つのボタン配色例

セミナーの告知：インディゴ背景にオレンジの申込みボタン

オンラインセミナーの冒頭部分では、背景をインディゴ■#29356Fにし、見出しをオフホワイト■#F8F7F2、説明文を白■#FFFFFFにします。背景と見出しは約10.68:1、背景と説明文は約11.46:1です。目立たせる操作を「セミナーに申し込む」の1つに絞り、オレンジ■#F5A43Eのボタンをその直下に置きます。

ボタンの文字はインディゴ■#29356Fにします。ボタン文字とボタン背景の比は約5.60:1、オレンジのボタンと周囲のインディゴの比も約5.60:1です。写真を使う場合でもボタンは単色のインディゴ部分に置き、写真の上に直接重ねないと周囲の明るさを管理しやすくなります。

料金プランの案内：明るい背景にはインディゴのボタン

料金やサービス内容を並べるページでは、背景をオフホワイト■#F8F7F2、見出しをインディゴ■#29356F、本文を濃いグレー■#2C3341にします。背景と見出しは約10.68:1、本文は約11.82:1です。主要な「資料を請求する」ボタンはインディゴ■#29356Fで塗り、白■#FFFFFFの文字を載せます。文字との比は約11.46:1、周囲のオフホワイトとの差も約10.68:1です。

オレンジ■#F5A43Eは「受付中」などの短いラベルの背景に限定し、文字をインディゴ■#29356Fにします。ただしオレンジとオフホワイトの差は約1.91:1で、ラベルの輪郭が弱くなります。必要ならインディゴの枠を加え、文言も表示しましょう。オレンジをボタンに使いたい場合は、背景をインディゴの帯に変えるなど、ボタンの周囲も一緒に調整します。

ボタンが埋もれたときの調整と注意点

まず「ボタンの文字と塗り色」「ボタンと隣接する背景」を別々に確認します。インディゴの見出し帯の中に同色のボタンを置いても、ボタンの外形が分かりにくくなります。逆に明るい背景にオレンジを置いた場合も、色みは違って見えても明暗差は小さいことがあります。必要な場所だけ色を使い、余白や枠線、具体的な操作名を加えましょう。スマートフォンではボタン周辺の余白も確認します。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字には4.5:1以上、大きな文字には3:1以上のコントラスト比が必要です。ボタンやフォーカス表示を識別するために必要な視覚情報は、隣接する色との3:1以上が求められる場合があります。HueRollではHEX入力から配色候補を探し、選択した色と白・黒とのコントラストを確認できます。ただし任意の2色間の比率やAA・AAAの自動判定には対応していないため、完成画面の組み合わせは別途検証してください。