リッチ・スプリンググリーンに合う色は？落ち着いた新緑を豊かに見せる色合わせ【#29B814】

リッチ・スプリンググリーン（■#29B814）は、黄みを含んだ新緑系のグリーンを鮮やかに深めた色です。Webサイトでは、観葉植物のケアアプリで、選択中の植物、次の水やり日、主要な「水やりを記録」ボタンなどに使うと、新緑らしさを残しながら情報を豊かに見せやすくなります。ただし、淡い背景にグリーンの塗りだけを置くと、ボタンや選択カードの境界としてはコントラストが不足する場合があります。ここでは、ペールリーフホワイト、フォレストチャコール、ダスティモーブを合わせ、色の役割と見分けやすさを分けて考えます。

ペールリーフホワイトを土台にし、ダスティモーブで新緑に穏やかな色相差をつくる

■#29B814には、背景用のペールリーフホワイト■#F8FBF5、本文や枠線用のフォレストチャコール■#22311F、補助操作用のダスティモーブ■#C7A9C3を合わせる例が考えられます。

■#F8FBF5はごく淡い黄緑を含む明色で、リッチ・スプリンググリーンとのつながりを残しながら広い背景に使えます。■#22311Fは緑みをわずかに含む低彩度の濃色なので、植物名、水やり予定、日照メモ、育成記録などを落ち着いて整理できます。■#C7A9C3は紫みを含む低彩度色で、黄緑から色相を離しつつ鮮やかさを抑えているため、補助ボタンやメモ欄に穏やかな変化を加えられます。

植物ケア画面では、リッチ・スプリンググリーンを現在の植物と主要操作に絞る

実装では、植物一覧やケア記録カードの広い背景を■#F8FBF5にし、選択中の植物名、次の水やり日の強調、主要な「水やりを記録」ボタン背景へ■#29B814を使います。その上の文字は白ではなく■#22311Fにすると、コントラスト比は約5.21:1となり、通常サイズの文字に必要な基準を満たします。日照条件、室温メモ、前回のケア記録なども■#22311Fへまとめると、グリーンを主要な強調箇所へ限定できます。

UI（ユーザーが操作するボタンや選択カードなどの画面部品）の補助操作には、■#C7A9C3を「メモを追加」などのボタン背景に使い、文字と枠線を■#22311Fにします。リッチ・スプリンググリーンのボタンにも■#22311Fの枠線を付けると、淡い背景との境界を色面だけに頼らず示せます。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#22311Fと■#F8FBF5は約13.17:1、■#22311Fと■#29B814は約5.21:1、■#22311Fと■#C7A9C3は約6.48:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。

豊かに見せるなら、グリーンやモーブの塗りだけでケア状態を識別させない

■#29B814と■#F8FBF5のコントラスト比は約2.53:1、■#C7A9C3と■#F8FBF5は約2.03:1です。意味のあるUI部品を識別するための視覚情報には隣接色との3:1以上が求められるため、淡い背景上でグリーンやモーブの塗りだけにボタンやカードの境界を任せるのは避けます。■#22311Fの枠線や文字を組み合わせると、必要な境界を補えます。

また、「水やり予定」「完了」「要確認」などの状態は、グリーンとモーブの色分けだけで伝えず、状態名の文字、チェックマーク、日付、アイコンなども併用します。植物写真に黄緑が多い場合は、ページ全体へさらに■#29B814を広げるより、■#F8FBF5の余白を十分に残す方が、写真と操作を分けやすくなります。HueRollでは■#29B814をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。