ストロング・オレンジに合う色は？深みのあるオレンジを活発に見せる配色【#DAA60B】

ストロング・オレンジ（■#DAA60B）は、黄みを含みながら深さもある鮮やかなオレンジです。ウェビナー（Web上で行うセミナー）のライブ視聴ページでは、配信中のセッション名、現在のチャプター、主要な「質問を投稿」ボタンなどに使うと、深みのあるオレンジを活発なアクセントとして見せやすくなります。ただし、明るい背景との色面だけの差は小さく、白文字とのコントラストも十分ではありません。ここでは、ウォームアイボリー、インクネイビー、スレートブルーを合わせ、配信画面の情報量を整理しながらオレンジの存在感を出す配色を考えます。

ウォームアイボリーを土台にし、ネイビーでオレンジの輪郭を締める

■#DAA60Bには、背景用のウォームアイボリー■#FFF8EC、本文・時刻・枠線用のインクネイビー■#1E2936、補助操作用のスレートブルー■#35546Eを合わせる例が考えられます。

■#FFF8ECは黄みを含む明色で、オレンジとの温度感をつなぎながら配信タイトルやチャット欄の背景を軽くできます。■#1E2936は青みを含む低彩度の濃色なので、登壇者名、開始時刻、概要、注意事項などを主役色より落ち着いて整理できます。■#35546Eは落ち着いた青で、オレンジから色相（赤・青・緑など色みの違い）を離しつつ鮮やかさを抑えているため、「資料を見る」などの補助操作を主要操作と分けやすくなります。

ライブ視聴ページでは、ストロング・オレンジを現在のセッションと主要CTAに集める

実装では、ページ全体やチャット・概要欄の背景を■#FFF8ECにし、現在のセッション名、「配信中」のラベル、主要なCTA（Call to Action、質問投稿など次の行動を促す操作）の背景へ■#DAA60Bを使います。その上の文字と枠線を■#1E2936にすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約6.62:1です。通常サイズの文字に必要な4.5:1以上を満たします。本文、登壇者名、開始時刻、チャットの補足情報は■#1E2936にし、背景の■#FFF8ECとの比率は約13.95:1です。

一方、■#DAA60Bと■#FFF8ECは約2.11:1、■#DAA60Bと■#FFFFFFは約2.22:1です。そのため、オレンジの塗りだけをボタンや「配信中」ラベルの境界にしたり、オレンジ背景へ白の通常文字を置いたりするのは避けます。補助の「資料を見る」ボタンは■#35546Eを背景にし、その上の文字を■#FFFFFFにすると約7.94:1です。スレートブルーとページ背景も約7.52:1あり、補助操作の面を背景から区別できます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上、意味のあるUI（ユーザーが操作するボタンなどの画面部品）を色の境界で識別させる場合は隣接色との3:1以上が基準になります。ここでは、ストロング・オレンジの塗りだけでは明るい背景との3:1に届かないため、濃い枠線と文字を併用しています。

活発に見せるなら、配信状態をオレンジとブルーだけで伝えない

■#DAA60Bと■#35546Eのコントラスト比は約3.57:1です。ただし、「配信中」「まもなく開始」「終了」といった状態をこの2色の違いだけで伝えず、状態名の文字、再生アイコン、時刻、枠線なども併用します。配信映像自体にオレンジや暖色が多い場合も、UI（ユーザーが操作する画面部品）のオレンジを画面全体へ広げるより、現在位置と主要操作へ絞る方が映像と操作を分けやすくなります。

HueRollでは■#DAA60BをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。