ディープ・スプリンググリーンに合う色は？落ち着いた新緑を豊かに見せる色合わせ【#2A981B】

ディープ・スプリンググリーン（■#2A981B）は、新緑らしい黄緑寄りの鮮やかさを残しながら深さを持たせた色です。Webサイトでは、再生可能エネルギーの発電量や設備状況を確認するダッシュボードで、主要な更新操作、選択中の発電設備、重要なカード背景などに使うと、明るい黄緑よりも落ち着きを残しながら豊かな存在感を出しやすくなります。ただし、■#2A981Bは明るい背景上の通常文字としてはコントラストが十分ではないため、文字色として広く使うより、主要ボタンや選択面の背景として役割を決める方が扱いやすい色です。ここでは、ウォームライムストーン、インクブラウン、ディープラストを合わせ、新緑の豊かさを活かしながら数値情報を整理しやすい配色を考えます。

ウォームライムストーンを土台にし、濃い文字色とラストで役割を分ける

■#2A981Bには、背景用のウォームライムストーン■#F7F4EA、本文やボタン文字用のインクブラウン■#1A1816、補助操作用のディープラスト■#4B2F2Aを合わせる例が考えられます。

■#F7F4EAは黄みをわずかに含む明色で、発電量カードや設備一覧の広い面をやわらかくできます。■#1A1816はほぼ黒に近い暖色寄りの濃色なので、数値、単位、更新時刻、注記などを緑一色にせず整理できます。■#4B2F2Aは赤茶寄りの濃色で、新緑から色相を離しながら鮮やかさを抑えているため、補助操作を別の役割として見せやすくなります。

発電量ダッシュボードでは、スプリンググリーンを主要操作と選択面に集める

実装では、発電量カードや設備一覧の広い背景を■#F7F4EAにし、主要な「データを更新」ボタンや選択中の発電設備カード背景へ■#2A981Bを使います。その上の文字は■#1A1816にすると、通常文字に必要なコントラストを確保できます。現在の発電量、目標値、更新時刻、設備名などは■#1A1816で統一し、色だけで数値の重要度を作らないようにします。

UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、■#2A981Bの面に■#4B2F2Aの小さな「履歴を見る」ボタンを置き、その文字を■#F7F4EAにする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#2A981Bと■#1A1816は約4.73:1、■#1A1816と■#F7F4EAは約16.09:1、■#4B2F2Aと■#F7F4EAは約10.97:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#2A981Bと■#F7F4EAは約3.40:1、■#2A981Bと■#4B2F2Aは約3.22:1なので、これらを隣接させる意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

豊かに見せるなら、発電状態や増減を緑だけで伝えない

■#2A981Bと■#F7F4EAのコントラスト比は約3.40:1です。そのため、明るい背景上の通常サイズの本文文字として■#2A981Bを使うのは避け、文字は■#1A1816へ切り替えます。新緑は主要ボタン、選択中カード、枠線などへ役割を絞ると、豊かな存在感を残しながら数値を読み分けやすくなります。

また、「稼働中」「停止中」や前日比の増減などは、緑や赤茶などの色だけで区別せず、状態名の文字、矢印、プラス・マイナス記号、アイコンなども併用します。HueRollでは■#2A981BをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。