ブリリアント・オレンジに合う色は？輝くオレンジを楽しく見せる配色【#F7D264】

ブリリアント・オレンジ（■#F7D264）は、黄みを強く含む明るく鮮やかなオレンジです。オンラインクイズの回答画面では、選択した答え、現在の問題番号、主要な「回答する」ボタンなどに絞って使うと、輝くオレンジを楽しいアクセントとして見せながら、問題文や選択肢、進行状況を整理しやすくなります。ここでは、インクプラム、ウォームアイボリー、ディープティールを組み合わせます。

インクプラムでオレンジを引き締め、アイボリーとティールで役割を分ける

■#F7D264には、問題カードや主要操作の背景用のインクプラム■#24233A、選択肢一覧や解説エリアの背景用のウォームアイボリー■#FFF8ED、スキップや一覧表示などの補助操作用のディープティール■#2E6B68を合わせる例が考えられます。

■#24233Aは紫みをわずかに含む低彩度の濃色で、明るいオレンジとの明度差を大きくできます。■#FFF8EDは黄みを含む明色なので、問題文や選択肢を読む面を軽く保ちながら、オレンジとの温度感もつなげられます。■#2E6B68は青緑寄りの落ち着いた色で、オレンジから色相（赤・青・緑など色みの違い）を離しながら、「あとで回答」「問題一覧を見る」などの補助操作を主要な回答操作と分けやすくします。

クイズ画面では、ブリリアント・オレンジを選択回答と主要操作に集める

実装では、問題カードの背景を■#24233Aにし、問題文や残り問題数などの文字を■#FFF8EDにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.46:1です。

主要な「回答する」ボタン背景と現在の問題番号の短いアクセントへ■#F7D264を使い、ボタン上の文字とアイコンを■#24233Aにすると約10.43:1で、通常サイズの文字に必要な4.5:1以上を確保できます。オレンジのボタン面とインクプラムの背景も約10.43:1あるため、主要操作の輪郭を暗い面から明確に区別できます。

選択肢一覧は■#FFF8EDを背景にし、選択中の答えへ■#F7D264を使う場合は、色面だけに頼らず■#24233Aの枠線とチェックアイコンを併用します。オレンジとアイボリーの差は約1.39:1しかありませんが、インクプラムとアイボリーは約14.46:1です。「あとで回答」「問題一覧を見る」などの補助ボタンは■#2E6B68を背景にし、その上の文字を■#FFFFFFにすると約6.14:1です。ディープティールとアイボリーの差も約5.82:1あります。

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

楽しく見せるなら、白文字や正誤の色分けだけに頼らない

■#F7D264と■#FFFFFFのコントラスト比は約1.46:1なので、オレンジ背景へ通常サイズの白文字を置く使い方は避けます。この例では主要ボタンの文字を■#24233Aにします。

また、「正解」「不正解」「未回答」などを色だけで示さず、状態名の文字、チェックや×などのアイコン、解説文を併用します。明るい■#FFF8EDの上では、■#F7D264との差が約1.39:1しかないため、オレンジの細い枠だけで選択状態を伝えるのも避けます。HueRollでは■#F7D264をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。