灰桜と墨色を使う配色｜淡い背景と濃い文字の合わせ方

灰桜（はいざくら）は灰みを含む淡い桜色、墨色（すみいろ）は墨を思わせる黒に近い色です。この2色をWebで使うなら、灰桜をやわらかな背景、墨色を見出しや本文の文字に割り当てる方法が考えられます。この記事では陶器工房のWebサイトを例に、商品紹介とお手入れ案内の背景・文字・ボタンを具体的に組み合わせます。色名に対応する色見本は資料によって異なるため、灰桜■#E8D3D1、墨色■#2F2725を今回の例として統一します。HEX（ヘックス）はWebの色を6桁の英数字で指定するコードです。

灰桜を背景、墨色を文字に使う理由

灰桜■#E8D3D1は明るく、赤みも控えめな色です。広い面積に使っても、濃い文字を合わせれば文章のまとまりを作れます。墨色■#2F2725は黒に近い暗色ですが、わずかに赤みがあり、今回の灰桜と色みをつなげやすい組み合わせです。灰桜の背景と墨色の文字のコントラスト比は約10.20:1。コントラスト比とは、隣り合う色の明るさの差を示す数値です。

見出しだけを墨色にして本文を薄いグレーに変える必要はありません。まず見出しと本文の両方を墨色で統一し、文字の大きさや太さ、行間で優先順位を付けましょう。白■#FFFFFFを情報カードの背景に加える場合は、灰桜との差が約1.43:1と小さいため、背景色の違いだけでカードの境界を伝えない工夫も必要です。

陶器工房のWebサイトに使う2つの配色例

例1：灰桜の上に商品情報をまとめる。商品一覧の紹介エリアを灰桜■#E8D3D1にして、「手づくりの器」という見出しと短い説明を墨色■#2F2725で表示します。文字と背景の比は約10.20:1です。価格・大きさ・素材などの詳しい情報は白■#FFFFFFのカードに分け、本文を墨色■#2F2725にすると約14.61:1になります。

カードの輪郭が必要な場合は、落ち着いた灰茶色■#866D6Bの線を加えます。線は外側の灰桜■#E8D3D1と約3.32:1、内側の白■#FFFFFFと約4.76:1の差があり、淡い背景同士でも境界を示しやすくなります。「商品を見る」ボタンは墨色■#2F2725の背景に白■#FFFFFFの文字を載せます。文字とボタンは約14.61:1、ボタンと周囲の灰桜■#E8D3D1は約10.20:1です。

例2：長い説明の中で灰桜を小さく使う。「器のお手入れ方法」のページは白■#FFFFFFを基本背景にし、長い説明文を墨色■#2F2725で表示します。この組み合わせは約14.61:1です。洗い方や保管方法の文章が続く途中に、灰桜■#E8D3D1の補足欄を設け、「電子レンジ使用の注意」などの見出しと説明を墨色■#2F2725で載せます。補足欄の中は約10.20:1です。色だけで注意を伝えず、何に気を付けるのかを見出しにも明記します。

白文字と淡い境界に注意する

灰桜■#E8D3D1の上に白■#FFFFFFの文字を載せると、コントラスト比は約1.43:1しかありません。見た目がやさしくても、読みやすい組み合わせとはいえません。また、カード枠に使った灰茶色■#866D6Bも灰桜の上では約3.32:1なので、通常サイズの小さな説明文には使わず、墨色■#2F2725に戻しましょう。

WCAG 2.2というWebアクセシビリティの指針では、レベルAAの通常の文字に4.5:1以上、大きな文字に3:1以上を求めています。入力欄の枠や操作状態など、識別に必要な文字以外の表示は隣接色と3:1以上が必要な場合があります。一方、飾りだけの境界線すべてに同じ基準がかかるわけではありません。スマートフォンでもカードや補足欄の区切りを確認します。

HueRollではHEXコードで色を指定し、選択した色と白・黒のコントラスト比を確認できます。ただし任意の2色同士の比率やAA判定は自動では出ないため、実際に接する背景と文字・枠・ボタンの組み合わせを別途確認してください。