ライト・グリーンに合う色は？明るい緑をフレッシュに見せる配色例【#88F2A2】

ライト・グリーン（■#88F2A2）は、青みを少し含んだ明るく軽い緑です。観葉植物の水やりスケジュール画面では、「今日の水やり」や主要な完了ボタンなど、進行中の操作に絞って使うと、明るい緑をフレッシュに見せながら、植物名や次回予定、メモを整理しやすくなります。ここでは、ディープフォレスト、ウォームアイボリー、ミューテッドプラムを組み合わせます。

暗い緑で輪郭を作り、アイボリーとプラムで情報の優先度を分ける

■#88F2A2には、植物名や今日の作業をまとめるディープフォレスト■#173A2C、カレンダーやメモカードの背景用のウォームアイボリー■#FAF8F2、履歴確認や設定変更などの補助操作用のミューテッドプラム■#68485Cを合わせる例が考えられます。

■#173A2Cは青みを含む暗い低彩度の緑で、ライト・グリーンの明るさを残しながら文字や輪郭を引き締められます。■#FAF8F2は少し黄みのある明色なので、日付、植物名、次回予定、メモが並ぶ面でも圧迫感を抑えやすくなります。■#68485Cは赤紫寄りの落ち着いた濃色で、緑から色相（赤・青・緑など色みの違い）を離しながら、「水やり履歴を見る」「通知設定を変更」などの補助操作を主操作と分けやすくします。

水やり管理では、ライト・グリーンを「今日」と完了操作に集める

カレンダーや植物カードの背景を■#FAF8F2にし、植物名、次回予定、鉢の場所、補足メモを■#173A2Cで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約11.78:1です。

「今日の水やり」をまとめるサマリーパネルを■#173A2Cにし、主要な「水やり完了」ボタン背景、今日の日付、対象鉢数の短いアクセントへ■#88F2A2を使います。ボタン上の文字とアイコンを■#173A2Cにするとコントラスト比は約9.10:1で、通常サイズの文字に必要な4.5:1以上を確保できます。ライト・グリーンのボタン面とディープフォレストのパネルも約9.10:1あるため、暗い面の中で主要操作を区別しやすくなります。

一方、■#FAF8F2のカード上で、「本日対象」の行全体を■#88F2A2にすると、2色のコントラスト比は約1.30:1です。色面だけでは状態を十分に識別しにくいため、■#173A2Cの枠線、「本日」の文字、じょうろのアイコンを併用します。「水やり履歴を見る」「通知設定を変更」などの補助ボタンは■#68485Cを背景にし、その上を■#FFFFFFの文字にすると約7.86:1です。ミューテッドプラムとウォームアイボリーの差も約7.41:1あります。

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

フレッシュに見せるなら、白文字や色だけの状態表示を避ける

■#88F2A2と■#FFFFFFのコントラスト比は約1.38:1なので、ライト・グリーン背景へ通常サイズの白文字を置く用途では4.5:1へ届きません。この例では主要ボタンの文字を■#173A2Cにします。

また、「本日」「完了」「次回予定」「通知あり」などを色だけで区別せず、状態名の文字、日付、チェックや通知アイコンを併用します。HueRollでは■#88F2A2をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。