ソフト・オレンジに合う色は？まろやかなオレンジを自然に引き立てる配色【#EDDDAB】

ソフト・オレンジ（■#EDDDAB）は、明るいオレンジをやわらかく落ち着かせた色です。レシピ記事ページでは、「調理のコツ」などのポイント欄や主要な「レシピを保存」ボタンに使うと、写真や本文を邪魔しすぎず、まろやかなオレンジを自然に引き立てやすくなります。ここでは、ダークココア、アイボリーホワイト、ミューテッドセージを組み合わせます。

ダークココアで文字を締め、アイボリーとセージで自然にまとめる

■#EDDDABには、見出しや本文用のダークココア■#48392F、ページやレシピカードの背景用のアイボリーホワイト■#FCFAF6、分量換算や買い物リストなどの補助操作用のミューテッドセージ■#5B6E5Aを合わせる例が考えられます。

■#48392Fは赤みを含む暗い茶色で、ソフト・オレンジと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#FCFAF6はわずかに黄みを含む白に近い色なので、材料、手順、補足文など情報量の多い面を軽く保てます。■#5B6E5Aは落ち着いた緑で、オレンジから色相を離しながら、「分量を換算」「買い物リストを見る」といった補助操作を主要な保存操作と分ける候補になります。

レシピページでは、ポイント欄と保存ボタンにソフト・オレンジを使う

ページと通常のレシピカードを■#FCFAF6にし、料理名、材料、手順、所要時間を■#48392Fで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約10.59:1です。

「火を止めてから調味料を加える」などの調理ポイント欄を■#EDDDABにし、その上の見出しと本文を■#48392Fにすると、コントラスト比は約8.17:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

主要な「レシピを保存」ボタンにも■#EDDDABを使い、文字とアイコンを■#48392Fにします。ただし、ソフト・オレンジとページ背景の■#FCFAF6の差は約1.30:1しかありません。ボタンの存在を色面だけで示さず、■#48392Fの枠線を付けます。この枠線とページ背景のコントラスト比は約10.59:1です。

「分量を換算」「買い物リストを見る」などの補助ボタンは■#5B6E5Aを背景にし、その上を■#FFFFFFの文字にすると約5.49:1です。ミューテッドセージとアイボリーホワイトの差も約5.27:1あります。

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

自然に見せるなら、白文字や淡い色面だけで役割を伝えない

■#EDDDABと■#FFFFFFのコントラスト比は約1.35:1です。そのため、ソフト・オレンジ背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、ポイント欄や保存ボタンの文字を■#48392Fにします。

また、保存前と保存後を色の変化だけで伝えず、保存後は「保存済み」の文字やチェックアイコンも併用します。ポイント欄のような説明用の面は見出しで役割を明確にし、操作ボタンでは十分な枠線や文字を使うと、淡いオレンジを広く使っても役割を見失いにくくなります。HueRollでは■#EDDDABをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。