ミスト・レッドに合う色は？淡い赤を上品に見せる配色例【#F2E3E3】

ミスト・レッド（HEX（#から始まるWeb用カラーコード）で ■#F2E3E3）は、赤をかなり淡くやわらげた色です。オンラインギャラリーの展覧会紹介ページでは、企画名の帯やキュレーターコメントの背景に使うと、淡い赤を主役にしながら上品にまとめやすくなります。ここでは、ディープローズブラウン、ポーセリンホワイト、スレートブルーを組み合わせます。

赤みのある濃色で文字を支え、青系アクセントで操作を分ける

■#F2E3E3には、見出し・本文・引用文用として、ここではディープローズブラウンと呼ぶ■#543F46、ページ背景用のポーセリンホワイト■#FCFAFA、来場予約などの主要操作用として、ここではスレートブルーと呼ぶ■#4F6472を合わせる例が考えられます。

■#543F46は赤紫をわずかに含む暗いブラウンで、ミスト・レッドと色相（赤・青・緑など色みの違い）のつながりを残しながら、文字に必要な明るさの差を作れます。■#FCFAFAは白に近い色なので、作品写真や長めの解説文が並ぶページでも、背景を明るく保ちやすい候補です。■#4F6472は落ち着いた青系で、「来場予約をする」「開催情報を見る」といった操作を、赤系のコンテンツ面から色相で分けたいときに使えます。

展覧会紹介では、企画名とキュレーターコメントにミスト・レッドを使う

ページ全体の背景を■#FCFAFAにし、展覧会名、作家情報、解説文を■#543F46で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約9.28:1です。

企画名の帯やキュレーターコメントの背景に■#F2E3E3を使い、その上の文字を■#543F46にすると、コントラスト比は約7.75:1です。淡い赤を広めの面に使っても、濃い文字ならコメントや見出しを明確に示せます。

主要な「来場予約をする」ボタンは■#4F6472を背景にし、その上を■#FFFFFFの文字にすると約6.18:1です。さらに、■#4F6472は■#F2E3E3に対して約4.96:1、■#FCFAFAに対して約5.94:1あり、どちらの背景上でもボタンの輪郭を見分けやすくできます。

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

淡い赤を上品に見せるなら、白との色差だけで区切らない

■#F2E3E3と■#FCFAFAのコントラスト比は約1.20:1で、■#FFFFFFとの組み合わせでも約1.24:1です。そのため、ミスト・レッドの上に通常サイズの白文字を置いたり、ポーセリンホワイトとの色差だけで重要なコメント欄の境界を示したりする使い方には向きません。

コメント欄の境界そのものが情報の区切りとして必要なら、■#543F46の枠線や見出しを加えます。ミスト・レッドは企画名やコメントをまとめる広い面として使い、文字と主要操作を濃色で支えると、淡い赤を上品に残しながら役割を整理できます。HueRollでは■#F2E3E3を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。