ミスト・グリーンに合う色は？淡い緑を穏やかにまとめる組み合わせ【#E3F2E7】

ミスト・グリーン（HEX（#から始まるWeb用カラーコード）で ■#E3F2E7）は、緑をかなり淡くやわらげた色です。Web上で閲覧する月次アクセス解析レポートでは、KPI（重要指標）の要約カードや章の背景に使い、グラフ本体は濃い色で組み立てると、淡い緑を主役にしながら穏やかにまとめやすくなります。ここでは、ディープフォレスト、ウォームホワイト、ミューテッドテラコッタを組み合わせます。

淡い緑は面に使い、文字とグラフは濃い色で支える

■#E3F2E7には、見出し・本文・当月データ用として、ここではディープフォレストと呼ぶ■#304A37、ページ背景用のウォームホワイト■#FBFCF8、前月データや比較値用として、ここではミューテッドテラコッタと呼ぶ■#7B574Cを合わせる例が考えられます。

■#304A37は緑を含む暗い色なので、ミスト・グリーンと色相（赤・青・緑など色みの違い）を近づけながら、文字やグラフに必要な明るさの差を作れます。■#FBFCF8は白に近い暖色寄りの背景で、表やグラフが多いレポートでも余白を明るく保ちやすい候補です。■#7B574Cは赤みのある落ち着いた茶系なので、前月値や比較系列に絞って使うと、緑系の当月データと役割を分けられます。

月次レポートでは、KPIカードをミスト・グリーン、グラフを濃色で組む

ページ背景を■#FBFCF8にし、レポート名、注釈、表の文字を■#304A37で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約9.43:1です。

セッション数やコンバージョン数などのKPIカード背景に■#E3F2E7を使い、その上の見出しと数値を■#304A37にすると、コントラスト比は約8.39:1です。淡い緑を大きな面に使っても、濃い文字なら数値を明確に示せます。

月別の棒グラフでは、当月系列を■#304A37、前月系列を■#7B574Cにします。■#7B574Cと■#FBFCF8のコントラスト比は約6.16:1で、■#304A37も同じ背景に対して約9.43:1です。系列名と数値を直接ラベルで添えれば、色だけに頼らず比較できます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字には4.5:1以上のコントラスト比が必要です。また、グラフの線や棒など、内容を理解するために必要な図形情報には、隣接色との3:1以上が基準になります。

穏やかにまとめるなら、ミスト・グリーンをデータ線には使わない

■#E3F2E7と■#FBFCF8のコントラスト比は約1.12:1で、■#FFFFFFとの組み合わせでも約1.16:1です。そのため、ミスト・グリーンを細いグラフ線や重要な棒だけに使ったり、その上に白文字を置いたりする使い方には向きません。

ミスト・グリーンはKPIカードや章背景など広い面に使い、意味を持つグラフ系列は■#304A37や■#7B574Cのような濃色で示すと役割が明確です。カード境界そのものが識別に必要な場合は、■#304A37の枠線や見出しを加えます。HueRollでは■#E3F2E7を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。