ミスト・シャルトリューズに合う色は？淡い黄緑を爽やかに見せる配色例【#EBF2E3】

ミスト・シャルトリューズ（HEX（#から始まるWeb用カラーコード）で ■#EBF2E3）は、黄緑をかなり淡くやわらげた色です。新生活キャンペーンのランディングページでは、ヒーローエリアや案内帯などの広い面に使い、文字やボタンを濃い色で支えると、淡い黄緑を爽やかに見せやすくなります。ここでは、ディープオリーブ、ソフトホワイト、ミューテッドネイビーを組み合わせます。

淡い黄緑は背景に広く使い、文字とボタンで輪郭を作る

■#EBF2E3には、見出しや本文用として、ここではディープオリーブと呼ぶ■#45513A、ページ背景用のソフトホワイト■#FCFDF9、主要ボタン用として、ここではミューテッドネイビーと呼ぶ■#53657Aを合わせる例が考えられます。

■#45513Aは黄緑と近い方向の暗いオリーブ系で、ミスト・シャルトリューズと色相（赤・青・緑など色みの違い）のつながりを残しながら、文字に必要な明るさの差を作れます。■#FCFDF9は白に近い色なので、商品説明や申込条件が続く下層部分を明るく保ちやすい背景候補です。■#53657Aは落ち着いた青系で、黄緑の面から「キャンペーンを見る」「無料で始める」といった主要操作を色相で分けたいときに使えます。

キャンペーンLPでは、ヒーロー背景にミスト・シャルトリューズを使う

ヒーローエリアの背景を■#EBF2E3にし、見出し・説明文を■#45513Aで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約7.36:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

ヒーロー下の詳細説明やFAQの背景を■#FCFDF9にし、文字を■#45513Aにすると、コントラスト比は約8.25:1です。淡い黄緑をページ全体へ広げず、上部の印象づくりに集中させることで、情報量の多い部分との切り替えも作れます。

主要な「無料で始める」ボタンは■#53657Aを背景にし、その上を■#FFFFFFの文字にすると約5.98:1です。■#53657Aは■#EBF2E3に対しても約5.23:1、■#FCFDF9に対しても約5.86:1あり、どちらの背景上でもボタンの輪郭を見分けやすくできます。

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

爽やかに見せるなら、淡い黄緑に白を重ねすぎない

■#EBF2E3と■#FCFDF9のコントラスト比は約1.12:1、■#FFFFFFとの組み合わせでも約1.14:1です。そのため、ミスト・シャルトリューズの上に通常サイズの白文字を置いたり、白に近い背景との境界だけでセクションを分けたりする使い方には向きません。

淡い黄緑を爽やかに見せたい場合は、広い背景として使い、文字は■#45513A、主要操作は■#53657Aのような濃色で支えると役割を整理できます。HueRollでは■#EBF2E3を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。