トープと白の配色例｜背景とカードの境界を整える

トープと白は落ち着いたWebページに使いやすい組み合わせですが、薄いトープの背景に白いカードを置くと、境界がぼやけることがあります。カードを一段明るくするだけでは足りないときは、枠の濃さと余白を一緒に調整しましょう。家具の作品一覧とオンライン講座の料金カードを例に、背景と情報の区切り方を比較します。

白いカードが背景になじみすぎるときは境界を補う

トープは灰色と茶色の間にある色で、色名はフランス語の「モグラ」に由来します。デジタルの見本には暗めのトープ■#504946や、灰色寄りのトープグレー■#8B8589がありますが、すべての用途に共通する一つのカラーコードがあるわけではありません。この記事では暗いトープ■#504946を見出し・ボタンの基準にして、背景用に薄くした■#E9E1DCを組み合わせます。HEX（ヘックス）カラーコードは「#」と英数字でWeb上の色を表す形式で、ここでは6桁のコードを使います。

薄いトープ■#E9E1DCと白■#FFFFFFのコントラスト比は約1.29:1です。コントラスト比は隣り合う色の明るさの差を表す数値で、この組み合わせでは色だけでカードの端を見分けにくい場合があります。境界が必要なら、濃いトープ系の枠■#7B6D65を追加します。枠と白■#FFFFFFの比は約4.98:1、枠と背景■#E9E1DCは約3.86:1です。枠だけに頼らず、カードの間にも十分な余白を残します。

背景とカードを入れ替える2つの配色例

例1：家具の作品一覧は薄いトープ背景に白いカード

家具の作品一覧では、ページ全体を薄いトープ■#E9E1DCにして、写真と説明を載せるカードを白■#FFFFFFにします。作品名は暗いトープ■#504946、サイズや価格などの本文は濃い茶系のグレー■#362F2Bにします。カードの周りには枠色■#7B6D65を使い、写真の端やカード同士が接しないよう間隔を空けます。「作品を見る」ボタンは暗いトープ■#504946を背景に、白■#FFFFFFの文字を載せます。

枠を付けるなら、まずカードを囲む1本の線で試し、装飾用の線を重ねすぎないようにします。白いカードの面積を大きく取り、薄いトープが外側に見える余白を残すと、情報を分けながら落ち着いた画面にまとめられます。

例2：講座の料金比較は白背景に薄いトープのカード

複数の料金プランを並べるページでは、背景を白■#FFFFFF、各カードをさらに淡いトープ■#F3EEEAに変えます。プラン名を暗いトープ■#504946、価格と説明を濃いグレー■#362F2Bで表示します。「申し込む」ボタンは暗いトープ■#504946に白■#FFFFFFの文字を合わせ、カードの面とは別の濃さで目立たせます。

白■#FFFFFFとカード背景■#F3EEEAは約1.15:1なので、選択できる料金カードは濃い枠■#7B6D65と「選択中」という文字を併用します。この枠とカード背景■#F3EEEAの比は約4.32:1です。選択中のカードを色だけで表さず、ラベルや操作状態も分かるようにします。

文字と操作に必要な境界の基準を確認する

Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。暗いトープ■#504946と白■#FFFFFFは約8.81:1、濃いグレー■#362F2Bと白■#FFFFFFは約13.14:1、濃いグレー■#362F2Bと淡いカード背景■#F3EEEAは約11.40:1で、通常文字の基準を満たします。

一方、灰色寄りのトープグレー■#8B8589と白■#FFFFFFは約3.61:1で、通常文字には不足します。薄めの枠色■#AFA6A0も白■#FFFFFFとの比が約2.39:1、淡いカード背景■#F3EEEAとの比が約2.08:1です。操作できるカードや入力欄を認識するために枠が欠かせない場合、枠などの必要な視覚情報には隣接色と原則3:1以上が求められます。ただし、すべての飾り線や、境界を示さなくても識別できるカードに一律で適用されるわけではありません。

HueRollで確認できるのは選んだ色と白・黒のコントラストだけです。薄いトープと枠のような任意の2色の比較やAAの自動判定には対応していないため、完成画面で隣り合う色を別途計算し、スマートフォンでもカードの境界と操作を確認しましょう。