グレージュに合う色は？くすみカラーを活かす配色

グレージュは、グレーとベージュの中間に見える色の呼び方で、特定の1色に決まっているわけではありません。この記事では一例として ■#B8ADA3 を基準にします。くすみカラーは、ここでは彩度（色の鮮やかさ）を抑えた色として扱います。グレージュの穏やかさを残しながら、Webサイトの背景、文字、見出し、ボタンで役割が埋もれない配色を考えます。

グレージュには明るいニュートラルと低彩度の差し色を合わせる

■#B8ADA3 のようなグレージュは、鮮やかな色を多く重ねるより、周囲も彩度を抑えつつ明るさに差を付けると、くすみ感を保ちやすくなります。ページ背景にはオフホワイト ■#F7F4F0、本文にはチャコール ■#33302E を使うと、グレージュを広い面に使っても文字の役割を分けやすくなります。

差し色には、同じく彩度を抑えたダスティブルー ■#5A6F7D や、くすんだローズ ■#7B6166 が合わせやすい候補です。どちらもグレージュとは色みが異なるため変化を付けられますが、鮮やかさをそろえることでページ全体の静かな印象を保ちやすくなります。

くすみ感を活かす3つの配色例

1. オフホワイトとチャコールで明るさの差を作る

ページ背景をオフホワイト ■#F7F4F0、カードや見出し帯をグレージュ ■#B8ADA3、本文をチャコール ■#33302E にします。本文とオフホワイトのコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約11.95:1、本文とグレージュは約5.95:1です。明るい背景と濃い文字の間にグレージュを置くことで、淡い色だけで画面がぼやけるのを防ぎやすくなります。

2. ダスティブルーをボタンやリンクに使う

主要ボタンをダスティブルー ■#5A6F7D、ボタン文字を白 ■#FFFFFF にすると、コントラスト比は約5.24:1です。オフホワイト ■#F7F4F0 上でダスティブルーをリンク文字に使う場合も約4.78:1あります。グレージュの温かさに少し青みを加えたいときに使いやすい組み合わせです。

3. くすみローズで温かいアクセントを足す

キャンペーン名や短いラベルなど、限られた場所にくすみローズ ■#7B6166 を使うと、グレージュのやわらかさを保ちながら温かい変化を付けられます。オフホワイト ■#F7F4F0 上のローズ文字は約5.12:1、ローズ背景に白 ■#FFFFFF を置く場合は約5.61:1です。ダスティブルーとローズを同時に強調色へ使うより、どちらか一方を選ぶと色数を抑えやすくなります。

明るさが近いくすみ色同士は直接重ねない

グレージュ ■#B8ADA3 とダスティブルー ■#5A6F7D のコントラスト比は約2.38:1、グレージュとくすみローズ ■#7B6166 は約2.55:1です。色みが違って見えても明るさの差は十分ではないため、この組み合わせを通常サイズの文字と背景として直接重ねるのは避けます。文字はチャコール ■#33302E や白 ■#FFFFFF へ切り替え、差し色はボタン、リンク、短いラベルなど役割を限定します。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が求められます。HueRollではグレージュ ■#B8ADA3 を6桁のHEX（Webで色を表す16進数コード）で入力し、ティント、シェード、補色、類似色、各種配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、この記事で示した2色間の比率は別途計算した値です。