ソフト・スプリンググリーンに合う色は？明るい新緑を自然にまとめる色合わせ【#B3EDAB】

ソフト・スプリンググリーン（■#B3EDAB）は、黄緑寄りの明るさを残しつつ、鮮やかさを少し抑えたやさしい緑です。Webサービスの初期設定チェックリストでは、選択中のステップや主要な「次へ進む」ボタンなどに範囲を絞って使うと、軽快さを残しながら自然にまとめやすくなります。ここでは、濃いフォレストグリーン、ごく薄いグリーンホワイト、くすみ紫を組み合わせます。

濃い緑で文字を締め、薄い背景で黄緑の軽さを残す

■#B3EDABには、見出しや本文用の濃いフォレストグリーン■#25452E、設定項目カードの背景用のごく薄いグリーンホワイト■#FAFCF7、補助操作用のくすみ紫■#6A4B6Dを合わせる例が考えられます。

■#25452Eはソフト・スプリンググリーンと色相（赤・青・緑など色みの違い）を近づけながら、明るさを大きく下げた色です。黄緑の軽さを残しつつ、文字や輪郭を引き締められます。■#FAFCF7は白に近い淡色なので、入力項目や説明文が多い面でも背景を軽く保てます。■#6A4B6Dは落ち着いた紫で、緑系から色相を離し、「あとで設定する」などの補助操作を主要操作と分ける候補になります。

初期設定画面では、ソフト・スプリンググリーンを現在位置と主要操作に使う

ページと設定カードの背景を■#FAFCF7にし、項目名、説明文、入力ラベルを■#25452Eで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約10.32:1です。

現在の設定ステップや主要な「次へ進む」ボタンの背景に■#B3EDABを使い、その上の文字とアイコンを■#25452Eにすると、コントラスト比は約7.93:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#B3EDABと■#FAFCF7の差は約1.30:1です。淡い色面だけで現在位置や選択状態を表すと見分けにくいため、■#25452Eの枠線、番号、チェックアイコン、「現在のステップ」といった文字を併用します。「あとで設定する」などの補助ボタンは■#6A4B6Dを背景にし、その上を■#FFFFFFの文字にすると約7.39:1です。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字には4.5:1以上のコントラスト比が必要です。また、意味のあるUI（ユーザーが操作するボタンや選択状態などの画面部品）を識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。

爽やかに見せるなら、白文字と色だけの状態表示を避ける

■#B3EDABと■#FFFFFFのコントラスト比は約1.34:1です。そのため、ソフト・スプリンググリーン背景へ通常サイズの白文字を置く使い方では4.5:1へ届きません。この例では、主要ボタンの文字を■#25452Eにします。

また、未設定・設定中・完了などの状態を色だけで伝えず、状態名の文字、番号、チェックアイコンを併用します。ソフト・スプリンググリーンをページ全体へ広げるより、現在のステップや主要ボタンなど面積を絞った場所へ使い、■#FAFCF7の余白を広く取ると、黄緑の明るさを活かしながら情報を整理しやすくなります。HueRollでは■#B3EDABをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事の比率は別途計算した値です。