ベージュに合うアクセントカラーは？ぼやけない配色の作り方

ベージュを主役にした配色はやわらかくまとめやすい一方、近い明るさの色ばかりを重ねると、見出しや区切りがぼやけて見えることがあります。ここではベージュ■#D8C9B8に、深い青緑■#294E5Aをアクセントとして合わせます。本文にはダークブラウン■#332F2A、ページ背景にはクリーム■#FAF7F1を使い、ベージュのやさしさを残しながら情報の輪郭を作ります。

ベージュには、明度を落とした青緑を合わせる

■#D8C9B8は明るめの暖色系なので、アクセントまで淡い色にすると役割の差が弱くなりやすくなります。そこで、ここでは■#294E5Aを少量使います。色相（赤・青・緑など色みの違い）と明るさの両方に差を付けることで、ベージュの穏やかさを残しながら、見出しや価格など必要な場所だけを引き締められます。

本文の■#332F2Aとページ背景の■#FAF7F1は、コントラスト比（前景と背景の相対的な明るさの差を示す数値）が約12.42:1です。ベージュ■#D8C9B8の上に■#332F2Aの文字を置く場合も約8.20:1あります。

カフェの季節メニューでは、青緑を価格とカテゴリ見出しに使う

カフェの季節メニューを掲載するページを例にすると、ページ全体を■#FAF7F1、メニューの各カテゴリ面を■#D8C9B8、料理名と説明を■#332F2Aにします。ベージュ面の文字は約8.20:1なので、淡い背景でも内容を明確に示せます。

アクセントの■#294E5Aは、「Coffee」「Seasonal Dessert」などのカテゴリ見出し、価格、短い「本日限定」ラベルなどに使います。■#FAF7F1上の青緑文字は約8.42:1、■#D8C9B8上でも約5.56:1です。青緑をラベル背景にして■#FFFFFFの文字を置く場合は約9.01:1あります。

さらに、ベージュのメニュー面とクリームのページ背景の境界が情報の区切りとして必要なら、■#294E5Aの細い枠線や見出し線を使えます。青緑はベージュに対して約5.56:1、クリームに対して約8.42:1あるため、境界を色差だけに頼るより明確に分けられます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が必要です。また、操作や情報理解に必要な境界などの非テキスト情報には、隣接色との3:1以上が基準になります。

ぼやけない配色にするなら、ベージュとクリームの差だけに頼らない

■#D8C9B8と■#FAF7F1のコントラスト比は約1.51:1で、■#FFFFFFとの組み合わせでも約1.62:1です。そのため、重要なカードやメニューカテゴリの境界を淡い面同士の差だけで示すのは避けます。濃い見出し、青緑の枠線、余白などを併用すると、ベージュのやわらかさを残したまま構造を明確にできます。

ベージュの配色では、アクセントを増やすより、本文・見出し・価格・境界など役割を決めて濃色を配置するほうが、ぼやけにくくまとまりやすくなります。HueRollでは■#D8C9B8を入力し、補色・類似色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。