ペール・スプリンググリーンに合う色は？淡い新緑を爽やかに見せる色合わせ【#CEEDC9】

ペール・スプリンググリーン（HEX（#から始まるWeb用カラーコード）で ■#CEEDC9）は、新緑を思わせる緑を淡くやわらげた色です。ヘルプセンターの検索画面では、選択中のカテゴリや検索のヒント、主要な「検索する」ボタンなどに範囲を絞って使うと、淡い新緑を主役にしながら、軽く爽やかな印象へまとめやすくなります。ここでは、ダークグリーン、ソフトアイボリー、ミューテッドバイオレットを組み合わせます。

ダークグリーンで文字を締め、アイボリーとバイオレットで役割を分ける

■#CEEDC9には、見出しや本文用として、ここではダークグリーンと呼ぶ■#2F4A37、ページ背景用のソフトアイボリー■#FBFCF6、問い合わせなどの補助操作用として、ここではミューテッドバイオレットと呼ぶ■#6B4F8Aを合わせる例が考えられます。

■#2F4A37は暗い緑系で、ペール・スプリンググリーンと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#FBFCF6はわずかに黄みを含む白に近い色なので、検索結果やFAQカードが並ぶ広い面を明るく保ちやすい背景候補です。■#6B4F8Aは落ち着いた紫系で、「問い合わせる」「サポート窓口を見る」などの補助操作を、緑系の主要操作と色相で分けたいときに使えます。

ヘルプセンターでは、選択中のカテゴリと主要ボタンにペール・スプリンググリーンを使う

ページ背景と通常のFAQカードを■#FBFCF6にし、質問タイトル、説明文、検索結果の本文を■#2F4A37で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約9.44:1です。

選択中のカテゴリ、検索のヒントカード、主要な「検索する」ボタンの背景に■#CEEDC9を使い、その上の文字とアイコンを■#2F4A37にすると、コントラスト比は約7.69:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#CEEDC9と■#FBFCF6の差は約1.23:1です。淡い背景色の違いだけでは選択中のカテゴリや検索ボタンの境界を見分けにくいため、■#2F4A37の枠線、チェックアイコン、「選択中」の文字を併用します。この枠線とページ背景のコントラスト比は約9.44:1です。

「問い合わせる」などの補助ボタンは■#6B4F8Aを背景にし、その上を■#FFFFFFの文字にすると約6.75:1です。■#6B4F8Aと■#FBFCF6の差も約6.54:1あり、補助操作を背景から分けやすくなります。

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

爽やかに見せるなら、白文字や淡い色面だけで状態を伝えない

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

また、「選択中」「検索結果あり」「該当なし」などの状態を色だけで伝えず、状態名の文字、チェックアイコン、件数なども併用します。ペール・スプリンググリーンをページ全体へ広げるより、選択中のカテゴリや主要操作など用途を絞って使い、■#FBFCF6の余白を広く取ると、淡い新緑を主役にしながら軽さを保ちやすくなります。HueRollでは■#CEEDC9を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。