ソフト・グリーンに合う色は？やさしい緑を穏やかに見せる配色例【#ABEDBB】

ソフト・グリーン（■#ABEDBB）は、明るさを保ちながら鮮やかさを少し抑えたやさしい緑です。オンライン講座の学習画面では、選択中のレッスンや主要な「学習を続ける」ボタンなどに範囲を絞って使うと、緑の軽さを残しながら穏やかに整理できます。ここでは、ディープフォレスト、クラウドホワイト、ミューテッドプラムを組み合わせます。

濃い緑で輪郭を作り、白に近い背景でソフト・グリーンを引き立てる

■#ABEDBBには、見出しや本文用のディープフォレスト■#234B31、レッスンカードや本文背景用のクラウドホワイト■#F8FBF8、補助操作用のミューテッドプラム■#6D4C5Bを合わせる例が考えられます。

■#234B31はソフト・グリーンと色相（赤・青・緑など色みの違い）を近づけながら、明るさを大きく下げた色です。緑系でまとまりを作りつつ、文字や輪郭をはっきり見せやすくなります。■#F8FBF8はごく淡い緑みを含む白に近い色なので、教材名や説明文を載せる広い面に使いやすい色です。■#6D4C5Bは落ち着いた赤紫系で、緑から色相を離し、「ノートを見る」などの補助操作を主要操作と分ける候補になります。

学習画面では、ソフト・グリーンを選択中の項目と主要ボタンに集める

ページやレッスンカードの背景を■#F8FBF8にし、講座名、レッスン名、説明文、進捗の数値を■#234B31で表示します。この組み合わせのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約9.49:1です。

選択中のレッスンや主要な「学習を続ける」ボタンの背景に■#ABEDBBを使い、その上の文字とアイコンを■#234B31にすると、コントラスト比は約7.33:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#ABEDBBと■#F8FBF8の差は約1.29:1です。淡い背景色だけで選択状態を表すと見分けにくいため、選択中のカードには■#234B31の枠線、チェックアイコン、「選択中」の文字を併用します。「ノートを見る」などの補助ボタンは■#6D4C5Bを背景にし、その上を■#FFFFFFの文字にすると約7.41:1です。

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

穏やかに見せるなら、白文字や色だけの状態表示に頼らない

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

また、未着手・学習中・完了などの進捗を色だけで区別せず、状態名の文字、チェックや再生などのアイコン、必要に応じて進捗率も併用します。ソフト・グリーンを広い背景へ使うより、選択中の項目や主要ボタンなど面積を絞った場所へ使い、■#F8FBF8の余白を広く取ると、やさしい緑を主役にしながら情報を穏やかに整理しやすくなります。HueRollでは■#ABEDBBをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事の比率は別途計算した値です。