シルバーに合う色は？クールに見せる組み合わせ

シルバーをWeb配色に使うときは、青みを含む濃色や淡い寒色と組み合わせると、クールな方向へまとめやすくなります。この記事ではシルバーの一例として■#BFC5CCを使い、ディープネイビー■#27384A、アイスブルー■#DDE9EF、ティール■#2B6371、オフホワイト■#F8FAFCを組み合わせます。

シルバーには、深いネイビーと淡い寒色を合わせる

■#BFC5CCは明るめの無彩色に近い色なので、文字まで淡色にすると役割がぼやけやすくなります。本文や主要見出しには■#27384Aを使うと、シルバー上でのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約6.90:1です。オフホワイト■#F8FAFC上では約11.46:1あります。

補助面には■#DDE9EFを使えます。ネイビー■#27384Aとの比率は約9.70:1です。シルバー、ネイビー、淡いブルーという寒色寄りの組み合わせにすると、色数を増やしすぎずにクールな印象へ寄せやすくなります。

オーディオ機器の比較ページでは、シルバーを仕様見出しに使う

ワイヤレスヘッドホンやオーディオ機器の比較ページを例にすると、ページ背景を■#F8FAFC、製品名や仕様本文を■#27384Aにします。主要な仕様見出しや「アルミ仕上げ」「軽量モデル」などの短い情報帯には■#BFC5CCを使い、その上の文字を■#27384Aにすると約6.90:1です。

バッテリー時間や重量などを並べる比較表の交互行には■#DDE9EFを使い、文字を■#27384Aにすると約9.70:1です。主要な「詳細を見る」ボタンは■#2B6371を背景にし、■#FFFFFFの文字を置くと約6.72:1です。

ティール■#2B6371は、オフホワイト■#F8FAFCに対して約6.42:1、アイスブルー■#DDE9EFに対して約5.43:1あるため、どちらの面に置いてもボタンの輪郭を見分けやすくできます。

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

クールに見せるなら、淡い寒色同士の差だけに頼らない

■#BFC5CCと■#F8FAFCのコントラスト比は約1.66:1、アイスブルー■#DDE9EFとの組み合わせでは約1.41:1です。そのため、重要なカードや比較表の境界をシルバーと淡い背景の差だけで示すのは避けます。

境界そのものが情報理解に必要なら、■#27384Aの枠線や見出し、または十分な差のある■#2B6371を使います。HueRollでは■#BFC5CCを入力し、補色・類似色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。