シルバーグレーの配色例｜白い背景でも単調に見せない色合わせ
白い背景とグレーだけでWebサイトを作ると、すっきり見える反面、情報の区切りや注目してほしい場所が分かりにくくなることがあります。シルバーグレーは、白の軽さを残しながら画面に変化を付けたいときの候補です。ただし、淡いグレーを文字や重要な枠線にも使うと、見づらくなる場合があります。ここではデスクライトの製品紹介ページを例に、色の役割と組み合わせを整理します。
シルバーグレーは文字よりも補助面に使う
シルバーグレーは、銀色を思わせるやや明るいグレーの呼び方ですが、一つに決まった色コードがあるわけではありません。この記事では少し青みを含む#B9BFC7を一例とします。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で指定する形式です。
白#FFFFFFとシルバーグレー#B9BFC7のコントラスト比は約1.85:1です。コントラスト比は、2色の相対的な明るさの差を表す数値です。色みの違いは感じられても、必要な境界をこの差だけで示すには弱いため、シルバーグレーは仕様の見出し帯や短い補助面などに使い、本文は濃い色で表示します。
例えば、白#FFFFFFにチャコール#2E3640の本文を置くと約12.22:1、見出しを濃いスレートグレー#45505Fにすると約8.18:1です。濃い文字色を軸にすれば、背景側のグレーを淡くしても読み取る情報の強弱を付けられます。
白い製品ページにシルバーグレーと暖色を添える配色例
白背景のデスクライト紹介ページなら、写真を置く範囲は白のままにして、製品の特長・仕様・購入案内で背景を切り替えます。配色例は次のとおりです。
- ページ背景と製品写真の周囲：白#FFFFFFを広く使います。製品名はスレートグレー#45505F、価格や説明文はチャコール#2E3640にして、見出しと本文を濃淡で分けます。
- 特長の説明欄：ごく淡いグレー#F3F5F6を背景にし、本文はチャコール#2E3640にします。文字との比は約11.18:1です。白#FFFFFFとの差は約1.09:1なので、面の違いだけに頼らず見出しと余白でも区切ります。
- 製品仕様の見出し帯：シルバーグレー#B9BFC7の面にチャコール#2E3640で「サイズ」「素材」などを表示します。文字との比は約6.60:1です。枠線が重要な境界を示す場合は濃いブルーグレー#5B6774を使い、白#FFFFFFとの比約5.77:1、シルバーグレー#B9BFC7との比約3.12:1を確保します。
- 購入ボタン：白#FFFFFFの範囲に落ち着いた赤茶#915747のボタンを一つ置き、文字は白#FFFFFFにします。文字とボタンの比は約5.74:1です。青みのあるグレーに対して暖色を小さく添えると、購入する場所を背景や仕様欄とは別の役割として示せます。
この組み合わせでは、シルバーグレーは情報をまとめる補助色、赤茶は操作を示す差し色です。どちらも広く塗り過ぎず、白い余白を残すことで、製品写真や文章を主役にできます。
白背景で単調に見えるときに確認したいこと
まず、すべての区切りを薄いグレーの線で描いていないかを確認します。装飾の線なら淡くても構いませんが、入力欄や操作部品などの識別に必要な輪郭は、隣り合う色と十分に差を付けます。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に原則4.5:1以上、意味のある操作部品の視覚的な手がかりには原則3:1以上のコントラスト比が求められます。
シルバーグレー#B9BFC7の上に白文字#FFFFFFを載せた場合は約1.85:1で、通常の文字には不足します。また、HEXの単色指定だけでは金属の光沢は表現できません。銀色らしさを強めたいときも、文字を薄くするのではなく、写真や質感表現と組み合わせて考えましょう。
HueRollでは色のHEXコードや配色候補を確認し、選択した色と白・黒とのコントラストを比べられます。任意の2色同士の比較やWCAGの自動判定はできないため、この記事の文字・背景・枠線の組み合わせは別途コントラスト比を計算して確認しています。