サーモンピンクとライトグレーの配色｜カードと背景を分ける方法

サーモンピンクとライトグレーは、やわらかな雰囲気を作りやすい組み合わせです。ただし、どちらも明るい色なので、カードとページ背景を隣り合わせにすると境界が曖昧になることがあります。色の配置だけでなく、文字・枠線・ボタンまで一組で決める方法を、2つのWebページ例で紹介します。

淡い2色の差だけに頼らず、カードの輪郭を考える

ここではサーモンピンクを■#F5B3AC、ライトグレーを■#D3D3D3として比較します。サーモンピンクの数値は配色用の一例で、色名に唯一の値はありません。一方、■#D3D3D3はCSS（Webページの見た目を指定する仕組み）の色名「lightgray」の値です。HEXは、色を6桁の16進数で表すコードです。色を決めたら背景とカードに同じコードを使いましょう。

サーモンピンクとライトグレーのコントラスト比（2色の相対的な明るさの差）は約1.18:1です。ライトグレーと白■#FFFFFFでも約1.50:1しかありません。色相が違っていても、面の境界が十分に見えるとは限りません。文字は濃いグレー■#30323Aにすると、サーモンピンク上で約7.26:1、ライトグレー上で約8.54:1になります。

カードと背景を分ける2つの配色例

講座一覧：ライトグレーの背景に白いカードを置く

オンライン講座の一覧ページでは、全体をライトグレー■#D3D3D3にし、講座名や開催日をまとめるカードを白■#FFFFFFにします。カード内の見出しと本文は濃いグレー■#30323Aに統一すると、白い面で約12.78:1です。「初心者向け」などの短いラベルだけをサーモンピンク■#F5B3ACにし、ラベル文字も濃いグレーにすると約7.26:1になります。

白いカードとライトグレーの背景は約1.50:1なので、カードの輪郭が必要なら濃い灰青■#59616Fの枠を加えます。枠と白いカードは約6.24:1、枠とライトグレーは約4.17:1です。「申し込む」ボタンは濃い青緑■#24576Bに白■#FFFFFFの文字を合わせると約7.92:1となり、白いカードの上でボタンの位置も区別できます。

特集案内：サーモンピンクの背景にグレーのカードを置く

季節のワークショップ特集では、上部の背景をサーモンピンク■#F5B3ACにし、日時・料金・持ち物をまとめたカードをライトグレー■#D3D3D3にします。見出しはピンクの背景に、カード内の説明はグレーの背景に置き、どちらも濃いグレー■#30323Aの文字を使います。文字と背景の比はそれぞれ約7.26:1と約8.54:1です。

この2つの淡い面の差は約1.18:1なので、必要なカードの輪郭には灰青■#59616Fを使います。枠とサーモンピンクは約3.55:1、枠とライトグレーは約4.17:1です。カード内の「予約する」ボタンは濃い青緑■#24576Bと白■#FFFFFFの文字で約7.92:1、ボタンとライトグレーの周囲も約5.29:1確保できます。

境界線・選択状態・スマートフォン表示の注意点

すべてのカードを濃い枠で囲むと、画面が細かく分断される場合があります。説明用の装飾カードなら余白や見出しで整理し、押せるカードや選択中の項目など、区切りが必要な場所には輪郭と「選択中」の表示を用意しましょう。細い線は実際の画面で弱く見えることもあります。スマートフォンでカードが縦に並んだ状態や、キーボードで操作したときのフォーカスも確認します。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字と背景のコントラスト比は4.5:1以上、大きな文字は3:1以上が基準です。操作部品や状態を識別するのに必要な視覚情報には、隣接色との3:1以上が求められる場合があります。HueRollではHEXから配色候補を探し、選択色と白・黒との比を確認できます。ただし任意の2色間の比較やAA・AAAの自動判定は行わないため、実際の組み合わせは別途検証してください。