ブライト・オレンジに合う色は？鮮やかなオレンジを陽気に引き立てる配色【#FFCF3D】

ブライト・オレンジ（■#FFCF3D）は、黄みを強く含む明るく鮮やかなオレンジです。オンラインホワイトボード（付箋や図形を並べてアイデアを共有する画面）では、選択中の付箋、主要な「付箋を追加」ボタン、現在編集中のアイデアのアクセントなどに絞って使うと、鮮やかなオレンジを陽気に引き立てながらメモや操作を整理しやすくなります。ここでは、ウォームアイボリー、ディーププラム、スレートブルーを組み合わせます。

ウォームアイボリーを土台にし、プラムとブルーでオレンジを引き締める

■#FFCF3Dには、ボード全体や未選択の付箋周辺の背景用のウォームアイボリー■#FFF9EC、付箋本文・見出し・枠線用のディーププラム■#2A2430、グループ化やテンプレート表示などの補助操作用のスレートブルー■#34546Aを合わせる例が考えられます。

■#FFF9ECは黄みをわずかに含む明色で、広いボード面を軽く保ちながらオレンジとの温度感をつなげられます。■#2A2430は紫みをわずかに含む低彩度の濃色なので、付箋本文、見出し、コメント、枠線などを主役色より落ち着いて整理できます。■#34546Aは青寄りの低彩度色で、オレンジから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「アイデアをグループ化」「テンプレートを開く」などの補助操作を主要操作と分けやすくなります。

ホワイトボードでは、ブライト・オレンジを選択中の付箋と追加操作に使う

実装では、ボード全体と未選択エリアの背景を■#FFF9ECにし、付箋本文、見出し、コメント、作成者名を■#2A2430にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.36:1です。

選択中の付箋、主要な「付箋を追加」ボタン背景、現在編集中のアイデア見出しの短いアクセントへ■#FFCF3Dを使い、その上の文字と枠線を■#2A2430にすると約10.22:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#FFCF3Dと■#FFF9ECの差は約1.40:1しかないため、明るい背景上ではオレンジの塗りだけで選択状態やボタンの境界を示さず、■#2A2430の枠線やチェックアイコンを併用します。この枠線とページ背景の差は約14.36:1です。

「アイデアをグループ化」「テンプレートを開く」などの補助ボタンは■#34546Aを背景にし、その上の文字を■#FFFFFFにすると約8.01:1です。スレートブルーとページ背景の差も約7.63:1あり、■#FFCF3Dとの比率は約5.43:1です。

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

陽気に見せるなら、白文字や付箋の状態を色だけで伝えない

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

また、「選択中」「投票済み」「要整理」「完了」などの状態をオレンジとブルーの色だけで表さず、状態名の文字、チェックマーク、投票数、枠線の太さなども併用します。HueRollでは■#FFCF3DをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。