ブライト・バーミリオンに合う色は？明るい赤橙を活発に見せる色合わせ【#FF863D】

ブライト・バーミリオン（■#FF863D）は、赤とオレンジの中間にある、明るく鮮やかな赤橙です。宅配ロッカーの荷物受取画面では、選択中の荷物、主要な「ロッカーを開ける」ボタン、受取手順の現在位置などに絞って使うと、明るい赤橙を活発に見せながらロッカー番号や受取期限、案内文を整理しやすくなります。ここでは、ウォームポーセリン、インクプラム、ディープスレートブルーを組み合わせます。

ウォームポーセリンを土台にし、プラムとスレートブルーで赤橙を引き締める

■#FF863Dには、荷物一覧や受取情報カードの背景用のウォームポーセリン■#FFF7F2、ロッカー番号・受取期限・説明文・主要ボタン文字用のインクプラム■#241F2A、受取履歴や利用方法などの補助操作用のディープスレートブルー■#3B566Dを合わせる例が考えられます。

■#FFF7F2は赤みをわずかに含む明色で、荷物一覧や案内カードの広い面を軽く保てます。■#241F2Aは紫みをわずかに含む低彩度の濃色なので、ロッカー番号、受取期限、受取コードの説明、注意事項などをバーミリオンより落ち着いて整理できます。■#3B566Dは青寄りの低彩度色で、赤橙から色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「受取履歴を見る」「利用方法を確認」などの補助操作を主要な開錠操作と分けやすくなります。

宅配ロッカーでは、ブライト・バーミリオンを選択中の荷物と開錠操作に使う

実装では、荷物一覧と未選択カードの背景を■#FFF7F2にし、荷物名、ロッカー番号、受取期限、補足説明を■#241F2Aにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約15.21:1です。

選択中の荷物カード、主要な「ロッカーを開ける」ボタン背景、受取手順の現在位置へ■#FF863Dを使い、その上の文字と枠線を■#241F2Aにすると約6.69:1です。通常サイズの文字に必要な4.5:1以上を確保できます。一方、■#FF863Dと■#FFF7F2の差は約2.27:1なので、明るい背景上では赤橙の塗りだけで選択カードやボタンの境界を示さず、■#241F2Aの枠線や鍵アイコンを併用します。この枠線とページ背景の差は約15.21:1です。

「受取履歴を見る」「利用方法を確認」などの補助ボタンは■#3B566Dを背景にし、その上の文字を■#FFFFFFにすると約7.67:1です。ディープスレートブルーとページ背景の差も約7.25:1あり、■#FF863Dとの比率は約3.19:1です。

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

活発に見せるなら、白文字や受取状態の色分けだけに頼らない

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

また、「受取可能」「選択中」「開錠済み」「受取完了」「期限切れ」などの状態をバーミリオンとスレートブルーの色だけで表さず、状態名の文字、鍵やチェックのアイコン、受取期限、完了メッセージなども併用します。HueRollでは■#FF863DをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。