ミューテッドダーク・スプリンググリーンに合う色は？暗い新緑を穏やかにまとめる色合わせ【#224A1C】

ミューテッドダーク・スプリンググリーン（■#224A1C）は、黄緑寄りの新緑を暗く落ち着かせた色です。Webサイトでは、進捗表示やカテゴリ見出し、主要ボタンなどに使うと自然な存在感を出しやすい一方、黄緑系の濃淡を増やしすぎると画面が重く見えることがあります。ここでは、ソフトリネン、バークグレー、ダスティブルーを合わせ、暗い新緑を穏やかに見せながら情報の階層を作る配色を考えます。

明るいリネンを土台にし、青みの低彩度色で静かな変化を付ける

■#224A1Cには、背景用のソフトリネン■#F3F1E9、補助文字用のバークグレー■#625F55、アクセント用のダスティブルー■#A2B4C6を合わせる例が考えられます。

■#F3F1E9はわずかに黄みを含む明色なので、新緑とのつながりを残しながら本文やカードの面を明るくできます。■#625F55は彩度を抑えた茶みのグレーで、補足文や日時、ステータスの説明などを主要文字より一段弱く見せる用途に向きます。■#A2B4C6は青側へ色相をずらした低彩度色で、黄緑の近似色を増やさずに静かな変化を付けられます。

進捗や状態表示では、明るい面を基本にして新緑を要点へ絞る

実装では、進捗カードや予約状況などの背景を■#F3F1E9にし、見出しや主要文字、主要ボタン背景へ■#224A1Cを使うと、暗い新緑を主役にしながら情報面を軽く保てます。補助文は■#625F55へ分けます。UI（ユーザーが操作する画面部品）のアクセントとしては、濃い■#224A1Cの面に■#A2B4C6の小さなボタンや選択ラベルを置き、文字を■#224A1Cにすると、緑の面積を増やさず役割を分けられます。

コントラスト比は、文字やUIと背景の相対的な明るさの差です。■#224A1Cと■#F3F1E9は約9.00:1、■#625F55と■#F3F1E9は約5.65:1、■#224A1Cと■#A2B4C6は約4.79:1です。WCAG 2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、濃い■#224A1Cの面に■#A2B4C6のUIを置く場合は、周囲との差も約4.79:1となり、意味のあるUI部品に必要な3:1以上も確保できます。

穏やかに見せるなら、ダスティブルーを明るい背景上の境界にしない

■#A2B4C6は、新緑から少し離れた青みを足す役目です。広い背景へ増やすより、濃い■#224A1Cの中に置く小さな操作要素や、非操作の短いラベルへ絞ると、画面全体の静けさを保ちやすくなります。

一方、■#A2B4C6と■#F3F1E9のコントラスト比は約1.88:1です。そのため、明るい背景上の通常文字には使わず、意味のあるUI部品の境界をこの2色だけで識別させる使い方も避けます。WCAG 2.2では、操作部品や意味のある図形を識別するために必要な視覚情報は隣接色と3:1以上が基準です。明るい面の操作要素には■#224A1Cの背景や枠線など、十分な明度差を持つ色を使います。