ミスト・バーミリオンに合う色は？やわらかな赤橙を活かす組み合わせ【#F2E9E3】

ミスト・バーミリオン（HEX（#から始まるWeb用カラーコード）で ■#F2E9E3）は、赤橙をかなり淡くやわらげた色です。ポッドキャストのエピソード紹介ページでは、ゲストの引用ボックスやプロフィール欄に使うと、やわらかな赤橙を活かしながら、本文から自然に区切って見せられます。ここでは、ディープココア、ウォームホワイト、スレートブルーを組み合わせます。

濃いココアで文字を支え、青系アクセントで操作を分ける

■#F2E9E3には、見出し・本文・引用文用として、ここではディープココアと呼ぶ■#5A4038、ページ背景用のウォームホワイト■#FCFAF8、再生操作用として、ここではスレートブルーと呼ぶ■#536575を合わせる例が考えられます。

■#5A4038は赤みを含む暗いブラウンで、ミスト・バーミリオンと色相（赤・青・緑など色みの違い）のつながりを残しながら、文字に必要な明るさの差を作れます。■#FCFAF8は白に近い暖色寄りの背景なので、番組説明や文字起こしが長く続くページでも明るい余白を保ちやすい候補です。■#536575は落ち着いた青系で、「エピソードを再生する」などの主要操作を赤橙系のコンテンツ面から色相で分けたいときに使えます。

エピソードページでは、引用とゲスト紹介にミスト・バーミリオンを使う

ページ全体の背景を■#FCFAF8にし、番組名、本文、文字起こしを■#5A4038で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約9.06:1です。

ゲストの印象的な発言を抜き出す引用ボックスやプロフィール欄の背景に■#F2E9E3を使い、その上の文字を■#5A4038にすると、コントラスト比は約7.88:1です。淡い赤橙を広めの面に使っても、濃い文字なら引用文や肩書きを明確に示せます。

主要な「エピソードを再生する」ボタンは■#536575を背景にし、その上を■#FFFFFFの文字にすると約6.02:1です。さらに、■#536575は■#F2E9E3に対して約5.03:1、■#FCFAF8に対して約5.79:1あり、どちらの背景上でもボタンの輪郭を見分けやすくできます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字には4.5:1以上のコントラスト比が必要です。また、操作に必要なボタンの境界などの視覚情報には、隣接色との3:1以上が基準になります。

やわらかな赤橙を活かすなら、白との色差だけで区切らない

■#F2E9E3と■#FCFAF8のコントラスト比は約1.15:1で、■#FFFFFFとの組み合わせでも約1.20:1です。そのため、ミスト・バーミリオンの上に通常サイズの白文字を置いたり、ウォームホワイトとの色差だけで重要な引用欄の境界を示したりする使い方には向きません。

引用ボックスの境界そのものが情報の区切りとして必要なら、■#5A4038の枠線や引用記号を加えます。ミスト・バーミリオンは引用やゲスト紹介の広い面として使い、本文と再生操作を濃色で支えると、やわらかな赤橙を残しながら役割を整理できます。HueRollでは■#F2E9E3を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。