ペール・ミントに合う色は？やさしいミントを清潔感のある印象にする配色【#C9EDE0】

ペール・ミント（HEX（#から始まるWeb用カラーコード）で ■#C9EDE0）は、ミント系の色を淡くやわらげた色です。予約フォームでは、選択した日時のカードや主要な「予約を確定する」ボタンなどに範囲を絞って使うと、明るい余白を残しながら、やさしいミントを主役にした清潔感のある画面へまとめやすくなります。ここでは、ディープティール、ミストホワイト、ダスティローズを組み合わせます。

ディープティールで文字を締め、ダスティローズで補助操作を分ける

■#C9EDE0には、見出しや本文用のディープティール■#2F5148、ページや入力欄の背景用のミストホワイト■#F8FCFA、日時変更などの補助操作用として、ここではダスティローズと呼ぶ■#8C4F56を合わせる例が考えられます。

■#2F5148は青緑を含む暗い色で、ペール・ミントと色相（赤・青・緑など色みの違い）を近づけながら明るさを大きく下げられます。■#F8FCFAはわずかに緑みを含む白に近い色なので、フォーム全体の面積を広く使っても主役のミントと競合しにくい背景候補です。■#8C4F56は赤紫寄りの落ち着いた色で、「日時を変更する」などの補助操作を主要な確定操作と色相で分けたいときに使えます。

予約フォームでは、選択済みカードと主要ボタンにペール・ミントを使う

ページ背景と通常の入力欄を■#F8FCFAにし、ラベル、入力内容、説明文を■#2F5148で表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約8.49:1です。

選択した日時のカードや「予約を確定する」ボタンの背景に■#C9EDE0を使い、その上の文字とアイコンを■#2F5148にすると、コントラスト比は約6.97:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

一方、■#C9EDE0と■#F8FCFAの差は約1.22:1です。淡い背景色の違いだけでは選択済みカードの境界を見分けにくいため、■#2F5148の枠線、チェックアイコン、「選択済み」の文字を併用します。この枠線とページ背景のコントラスト比は約8.49:1です。

「日時を変更する」などの補助ボタンは■#8C4F56を背景にし、その上を■#FFFFFFの文字にすると約6.24:1です。■#8C4F56と■#F8FCFAの差も約6.03:1あるため、補助操作を背景から分けやすくなります。

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

清潔感を保つなら、淡い色だけで選択状態を伝えない

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

また、「選択済み」「入力エラー」「予約確定」などの状態を色だけで伝えず、状態名の文字、チェックアイコン、枠線なども併用します。ペール・ミントをページ全体へ広げるより、選択済みカードや主要ボタンなど用途を絞り、■#F8FCFAの余白を広く取ると、淡い色同士が重なって輪郭を失うのを避けやすくなります。HueRollでは■#C9EDE0を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。