ペール・グリーンに合う色は？穏やかな緑を自然にまとめる配色例【#C9EDD2】

ペール・グリーン（HEX（#から始まるWeb用カラーコード）で ■#C9EDD2）は、緑を明るくやわらげた色です。オンライン講座の学習進捗ページでは、進捗の要約カードや現在のレッスン、「次のレッスンへ」ボタンなどに範囲を絞って使うと、穏やかな緑を主役にしながら情報を自然にまとめやすくなります。ここでは、ダークフォレスト、ウォームアイボリー、クレイブラウンを組み合わせます。

ダークフォレストで文字を締め、アイボリーとブラウンで役割を分ける

■#C9EDD2には、見出しや本文用として、ここではダークフォレストと呼ぶ■#304A36、ページ背景用のウォームアイボリー■#FCFBF5、復習などの補助操作用として、ここではクレイブラウンと呼ぶ■#8B5B4Dを合わせる例が考えられます。

■#304A36は暗い緑系で、ペール・グリーンと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#FCFBF5は少し黄みを含む白に近い色なので、背景を真っ白よりわずかにやわらげつつ、ペール・グリーンを目立たせすぎずに支えられます。■#8B5B4Dは落ち着いた赤みのブラウンで、「復習する」「一覧へ戻る」などの補助操作を、緑系の主要操作と色相で分けたいときに使えます。

学習進捗ページでは、要約カードと現在位置にペール・グリーンを使う

ページ背景と通常のレッスン一覧を■#FCFBF5にし、講座名、レッスン名、説明文を■#304A36で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約9.38:1です。

進捗率をまとめる要約カード、現在のレッスン、「次のレッスンへ」ボタンの背景に■#C9EDD2を使い、その上の文字とアイコンを■#304A36にすると、コントラスト比は約7.66:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#C9EDD2と■#FCFBF5の差は約1.23:1です。淡い背景色の違いだけでは現在のレッスンや選択中のカードを見分けにくいため、■#304A36の枠線、「現在のレッスン」という文字、位置を示すアイコンを併用します。この枠線とページ背景のコントラスト比は約9.38:1です。

「復習する」などの補助ボタンは■#8B5B4Dを背景にし、その上を■#FFFFFFの文字にすると約5.67:1です。■#8B5B4Dと■#FCFBF5の差も約5.47:1あり、補助操作を背景から分けやすくなります。

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

穏やかに見せるなら、淡い緑だけで進捗や状態を伝えない

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

また、「現在のレッスン」「完了」「未完了」などの状態を色だけで伝えず、文字、チェックアイコン、進捗数なども併用します。ペール・グリーンをページ全体へ広げるより、進捗要約、現在位置、主要操作など用途を絞って使い、■#FCFBF5の余白を広く取ると、穏やかな緑を主役にしながら情報の境界を保ちやすくなります。HueRollでは■#C9EDD2を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。