ピュア・オレンジに合う色は？澄んだオレンジを明るく際立たせる配色【#FFBF00】

ピュア・オレンジ（■#FFBF00）は、黄みを強く含んだ明るく鮮やかなオレンジです。通知センターやお知らせ一覧では、選択中の通知、主要な「通知を確認」ボタン、未読件数の強調などに使うと、澄んだオレンジを明るいアクセントとして際立たせやすくなります。ただし、白に近い背景とは明るさの差が小さいため、オレンジの塗りだけで未読や選択状態を示すのは避けた方が安全です。ここでは、インクネイビー、ウォームミスト、スレートブルーを組み合わせます。

インクネイビーで輪郭を締め、ウォームミストとブルーで役割を分ける

■#FFBF00には、本文・通知タイトル・枠線用のインクネイビー■#222B38、画面や通知カード背景用のウォームミスト■#FFF8E8、フィルターや履歴表示などの補助操作用のスレートブルー■#375A73を合わせる例が考えられます。

■#222B38は青みを含む低彩度の濃色で、明るいオレンジの上でも文字や輪郭をはっきり見せられます。■#FFF8E8は黄みをわずかに含む明色なので、通知本文や日時を読む面を軽く保ちつつ、オレンジとの色相のつながりも残せます。■#375A73は落ち着いた青で、オレンジから色相（赤・青・緑など色みの違い）を離しながら鮮やかさを抑えているため、「すべて表示」「履歴を見る」などの補助操作を主要操作と分けやすくなります。

通知センターでは、ピュア・オレンジを選択中の項目と主要確認操作に集める

実装では、画面全体と未選択の通知カードを■#FFF8E8にし、選択中の通知、主要な「通知を確認」ボタン、未読件数の背景へ■#FFBF00を使います。その上の文字・数字・アイコン・枠線を■#222B38にすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約8.64:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

通知タイトル、本文、日時、送信元は■#222B38にし、■#FFF8E8との比率は約13.49:1です。「履歴を見る」「フィルターを開く」などの補助ボタンは■#375A73を背景にし、その上の文字を■#FFFFFFにすると約7.31:1です。スレートブルーとページ背景の差も約6.91:1あります。

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

明るさを保つなら、未読状態をオレンジだけで伝えず濃い輪郭を併用する

■#FFBF00と■#FFF8E8のコントラスト比は約1.56:1、■#FFBF00と■#FFFFFFも約1.65:1です。そのため、明るい画面上にオレンジのボタンや選択カードを置く場合は、塗りだけを境界にせず、■#222B38の枠線・文字・アイコンを併用します。明るいオレンジの上に白の通常文字を置く使い方も避けます。

また、「未読」「既読」「要確認」などの状態をオレンジとブルーの色分けだけで伝えず、状態名の文字、太字の通知タイトル、未読件数、チェックアイコンなども組み合わせます。通知センターでは内容の重要度と未読・既読が別の意味を持つこともあるため、同じ■#FFBF00だけに複数の意味を持たせない方が整理しやすくなります。HueRollでは■#FFBF00をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。