サンドベージュの配色で境界がぼやけるときは？カードと背景の色分け

サンドベージュをWebページの背景に使うと、穏やかな雰囲気にまとめやすい一方、似た明るさのカードが背景に溶け込み、情報のまとまりが分かりにくくなることがあります。解決のポイントは、カードだけを派手な色に変えることではありません。背景とカードの明るさ、輪郭線、余白を別々に調整する方法を、セミナー一覧ページを例に紹介します。

境界がぼやける原因は、隣り合う面の明るさが近いこと

サンドベージュは一つの決まったカラーコードを指す名前ではありません。まず基準となる色を選び、ページの背景とカードの色をそれぞれ決めます。HEXコードとは、Webで使う色を「#」と16進数で表す書き方です。

例えばページ背景をサンドベージュの■#E8D8C4、カードを明るいアイボリーの■#FFF9F1にすると、二つの面のコントラスト比は約1.33:1です。コントラスト比は色同士の明るさの差を示す数値ですが、この程度の差だけでカードの輪郭がはっきり伝わるとは限りません。

色を極端に離す前に、カード同士を20pxほど空け、カード内にも24px程度の余白を設けます。必要な箇所には枠線を足しましょう。面の色、枠線、余白に役割を分けると、サンドベージュの落ち着きを残したまま情報を整理できます。

セミナー一覧カードの配色を2通りで比較する

背景をサンドベージュにし、カードを明るくする

ページ背景に■#E8D8C4、セミナー名や開催日時を載せるカードに■#FFF9F1を使います。カードの枠線には茶系の■#876B53を1px程度で加えると、枠線とページ背景の比は約3.53:1、枠線とカードの比は約4.71:1です。枠がカードの四辺を示すため、淡い面同士でも領域を追いやすくなります。

カードの見出しは濃い茶色の■#574434、本文は■#302A25、日時などの補足は■#675B4Bにします。カード背景■#FFF9F1との文字コントラスト比は、それぞれ約8.80:1、13.53:1、6.32:1です。「詳細を見る」ボタンは■#594536を背景に、白の■#FFFFFFを文字に使うと約9.02:1になり、明るいカード上で操作箇所を区別できます。

明るいページにサンドベージュのカードを置く

反対に、ページ背景をオフホワイトの■#FAF6EF、カードをサンドベージュの■#E9D7C0にする方法もあります。二つの面の比は約1.30:1なので、これも色の差だけに頼りません。枠線に■#846A54を使うと、ページ背景とは約4.67:1、カードとは約3.58:1です。

カード本文を■#302A25にすれば、サンドベージュのカード■#E9D7C0との比は約10.07:1です。補足文字■#675B4Bも同じ背景で約4.71:1を確保できます。写真の周囲を明るく残したい場合は前者、カード自体を温かみのある色面にしたい場合は後者、と用途で選ぶとよいでしょう。

枠線の必要性と文字の読みやすさは別々に確認する

WCAG（Web Content Accessibility Guidelines、Webコンテンツの利用しやすさに関する指針）2.2のレベルAAでは、通常サイズの文字には背景との4.5:1以上、規定の大きな文字には3:1以上のコントラスト比が必要です。また、操作部品の識別に必要な輪郭線などの非テキスト情報には、隣接色との3:1以上が求められます。ただし、装飾的なカードの枠すべてに一律に3:1が必要という意味ではありません。

カード全体をクリックできる場合は、枠や見出しだけで操作可能と伝わるかを確かめます。単に情報を並べるカードなら、見出し、余白、まとまりのある配置も判断材料です。スマートフォンでカードが縦並びになったときや、写真・影・半透明の色を重ねたときは、実際に接する色で再確認しましょう。

HueRollではHEXコードから色の濃淡や配色候補を調べ、選択色と白・黒のコントラストを確認できます。一方、任意の二色間の比率やAA判定は自動で行えません。今回の数値は示した不透明な色同士を別途計算したもので、画面全体の適合を保証するものではありません。まず面の役割を決め、必要な境界だけを補強するのが実用的です。