カードと背景を色で分ける方法｜境界線なしでも見やすいWEBデザイン

カードを境界線なしで見やすく分けたいときは、カード面とページ背景の明るさを少し変え、余白と文字の階層も合わせて整える方法があります。影や境界線で区切るのではなく、ここでは「面の色差そのもの」でカードのまとまりを作る考え方を扱います。色差を強くしすぎるとページが細かく分断されるため、背景は淡い色、カードは明るいSurface（情報を載せる面）として役割を分けます。

ページ背景を少し暗くし、カード面は白にする

以下のHEX（Webで色を表す16進数コード）例では、ページ背景をライトブルーグレー ■#E2E8F0、カード面を白 ■#FFFFFF にします。この2色のコントラスト比（相対的な明るさの差を示す数値）は約1.23:1です。大きな差ではありませんが、カードの周囲に十分な余白があれば、境界線や影を使わずに面の切り替わりを作れます。

CSSの background-color は要素の背景色を指定するプロパティです。ページ側とカード側で背景色を分けるだけなら、境界線を増やさずにレイアウトのまとまりを作れます。ただし、この1.23:1はWCAGの「操作部品の境界」として合格を示す数値ではありません。ここでは非操作の情報カードを視覚的にグループ化するための配色例として扱います。

カード内は文字の濃さで情報の順番を作る

カード背景を白 ■#FFFFFF にした場合、見出しをダークネイビー ■#0F172A にすると約17.85:1、本文をブルーグレー ■#475569 にすると約7.58:1、日付や補足情報をスレートグレー ■#64748B にすると約4.76:1です。カードの外側は面の色差、内側は文字の濃淡で整理すると、境界線を追加せずに情報の階層を作れます。

リンクや主要な操作だけにロイヤルブルー ■#1D4ED8 を使うと、白に対して約6.70:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上が基準です。背景色の差よりも、カード内の文字と背景の組み合わせを個別に確認することが重要です。

カードが操作部品なら、淡い色差だけに頼らない

商品カードや記事カード全体がクリックできるなど、カード自体が操作部品として認識される必要がある場合は注意が必要です。W3CのNon-text Contrastでは、操作部品の存在を示す視覚情報が必要な場合、その情報は隣接色との3:1以上が基準です。境界線なしの淡い背景差だけが唯一の手掛かりになる設計は避け、リンク文字・ボタン・アイコンなどで操作できることも示します。

キーボードフォーカスにはブルー ■#2563EB のリングを使う例があります。白 ■#FFFFFF に対して約5.17:1、ページ背景の ■#E2E8F0 に対しても約4.19:1です。W3CのFocus Visibleでは、キーボードで操作できる要素に見えるフォーカス表示が必要とされています。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、カード背景・ページ背景・文字・フォーカスなど、実際に隣接する組み合わせは別途確認します。