ビビッド・オレンジに合う色は？鮮やかなオレンジを元気に際立たせる配色【#FFC71F】

ビビッド・オレンジ（■#FFC71F）は、黄みを強く含む明るく鮮やかなオレンジです。フードデリバリーの注文確認画面では、選択中の配達時間、主要な「注文を確定」ボタン、確認してほしい合計金額のアクセントなどに絞って使うと、鮮やかなオレンジを元気に際立たせながら商品名や配送情報を整理しやすくなります。ここでは、ウォームシェル、ディーププラム、ディープティールを組み合わせます。

ウォームシェルを土台にし、プラムとティールでオレンジの役割を分ける

■#FFC71Fには、ページや注文カードの背景用のウォームシェル■#FFF9F2、商品名・価格・配送先・枠線用のディーププラム■#35263F、住所変更や注文内容の編集などの補助操作用のディープティール■#2E6460を合わせる例が考えられます。

■#FFF9F2は赤みをわずかに含む明色で、注文内容や配送情報の広い面を軽く保てます。■#35263Fは紫みを含む低彩度の濃色なので、商品名、数量、価格、住所などを主役色より落ち着いて整理できます。■#2E6460は青緑寄りの濃色で、オレンジから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「住所を変更」「注文内容を編集」などの補助操作を主要な確定操作と分けやすくなります。

注文確認画面では、ビビッド・オレンジを配達時間と注文確定操作に使う

実装では、ページ全体と注文内容カードの背景を■#FFF9F2にし、商品名、数量、価格、配送先、合計金額の説明を■#35263Fにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約13.39:1です。

選択中の配達時間、合計金額の強調、主要な「注文を確定」ボタン背景へ■#FFC71Fを使い、その上の文字と枠線を■#35263Fにすると約8.96:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#FFC71Fと■#FFF9F2の差は約1.49:1しかないため、明るい背景上ではオレンジの塗りだけで選択状態やボタンの境界を示さず、■#35263Fの枠線やアイコンを併用します。この枠線と■#FFF9F2の背景は約13.39:1です。

「住所を変更」「注文内容を編集」などの補助ボタンは■#2E6460を背景にし、その上の文字を■#FFFFFFにすると約6.76:1です。ディープティールとページ背景の差も約6.46:1あり、■#2E6460と■#FFC71Fの比率は約4.32:1です。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上が必要です。また、意味のあるUI（ユーザーが操作するボタンや選択欄などの画面部品）やグラフィックを識別するために必要な視覚情報は、隣接色との3:1以上が基準になります。

元気に見せるなら、注文状態や注意情報をオレンジだけで伝えない

■#FFC71Fと■#FFFFFFのコントラスト比は約1.56:1なので、オレンジ背景へ通常サイズの白文字を置く使い方は避けます。主要ボタンには■#35263Fの文字を使い、明るいページ背景上では同じ濃色の枠線も残します。

また、「確認待ち」「注文確定」「調理中」「キャンセル」などの状態を色だけで表さず、状態名の文字、チェックマーク、時計アイコン、注意記号なども併用します。HueRollでは■#FFC71FをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。