ダスキー・スプリンググリーンに合う色は？くすんだ新緑を穏やかにまとめる色合わせ【#286020】

ダスキー・スプリンググリーン（■#286020）は、新緑の軽さを残しながら明るさと鮮やかさを抑えた緑です。Webサイトでは、初期設定ガイド、オンボーディングの手順カード、ヘルプページの現在地表示などに使うと、鮮やかな黄緑よりも落ち着いた案内色として扱いやすくなります。ただし、緑系だけで手順や状態を分けると、情報の違いが色だけに依存しやすくなります。ここでは、ウォームクリーム、ディープグレーグリーン、ミューテッドモーヴを合わせ、くすんだ新緑を穏やかに見せながら、手順と補助情報を整理しやすい配色を考えます。

暖かいクリームを土台にし、モーヴで穏やかな色相差を作る

■#286020には、背景用のウォームクリーム■#F3F0E8、本文や補助文字用のディープグレーグリーン■#2F342F、アクセント用のミューテッドモーヴ■#B8A0B5を合わせる例が考えられます。

■#F3F0E8は黄みを含む明るい背景で、新緑との明度差を確保しながら画面全体を冷たくしすぎません。■#2F342Fは緑みをわずかに含む低彩度の濃色なので、説明文や補足情報を基準色より控えめに整理できます。■#B8A0B5は赤紫寄りの低彩度色で、緑系から色相を離しつつ強すぎない変化を加えられます。

オンボーディングでは、緑を現在の手順と主要操作に集める

実装では、手順カードやヘルプ面の広い背景を■#F3F0E8にし、現在のステップ見出し、主要ボタン背景、重要な案内ラベルなどへ■#286020を使います。本文や補足説明は■#2F342Fへ分けると、スプリンググリーンの役割を案内と操作に限定できます。UI（ユーザーが操作するボタンや入力欄などの画面部品）の補助操作には、濃い■#286020の面に■#B8A0B5の小さなラベルや副ボタンを置き、その上の文字を■#2F342Fにする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差です。■#286020と■#F3F0E8は約6.62:1、■#2F342Fと■#F3F0E8は約11.15:1、■#2F342Fと■#B8A0B5は約5.28:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#286020と■#B8A0B5は約3.14:1なので、濃い緑の面に置く意味のあるUI部品の境界として必要な3:1以上を確保できます。

現在地や完了状態を色だけで伝えない

■#B8A0B5は、緑系の画面へ穏やかな色相差を加えるアクセントです。ただし、■#B8A0B5と■#F3F0E8のコントラスト比は約2.11:1なので、明るい背景上の通常文字や、意味のあるUI部品の境界だけには使いません。

また、オンボーディングで「現在」「完了」「未完了」を示す場合は、緑・モーヴなどの色だけに意味を持たせず、「現在のステップ」「完了」といった文字、番号、チェックマークなども併用します。明るい面で操作要素を区切る場合は、■#286020や■#2F342Fの枠線・文字を使い、色が見分けにくい状況でも役割が分かる構成にします。