黒とシルバーのWeb配色｜文字と装飾のバランスを整える

黒とシルバーを組み合わせると、落ち着いた印象のWebデザインを作れます。ただし、シルバーを文字にも線にも多用すると、どこを読めばよいのか分かりにくくなることがあります。文字は読みやすさを優先し、シルバーは目立たせたい装飾に絞るのが基本です。暗いページと明るいカードの2例で、色の役割を整理します。

黒とシルバーは文字と装飾の役割を分ける

WebのCSS（ページの見た目を指定する仕組み）で、色名「silver」に対応するのは■#C0C0C0です。これは均一な明るいグレーであり、金属特有の反射や光沢まで表すものではありません。HEX（ヘックス）は、赤・緑・青の成分を16進数で表すカラーコードです。

黒に近い■#121212を広く使う場合は、見出しや本文の文字色を明るい■#F5F5F5にし、■#C0C0C0は短いラベル・区切り線・小さな装飾に使うと役割を分けられます。シルバーをすべての文字に使うより、重要な文章と飾りを区別しやすくなります。

Webページでの具体的な配色例

暗い商品紹介ページ：文字を明るく、シルバーは要所に

商品紹介ページの上部を■#121212の背景にし、商品名の大見出しと説明文には■#F5F5F5を使います。この文字と背景のコントラスト比は約17.18:1です。商品番号の短いラベルや見出しの下の線、シンプルなアイコンには■#C0C0C0を使います。■#C0C0C0と■#121212のコントラスト比は約10.30:1です。

「詳細を見る」ボタンを作るなら、背景を■#C0C0C0、文字を■#121212にします。ボタンの文字と背景の比率は約10.30:1で、ボタンの外側を■#121212にした場合も同じ比率で領域を区別できます。シルバーをボタンと少数の装飾に集中させると、装飾だけが主張しすぎることを避けられます。

明るい商品説明カード：シルバーを文字色の代わりにしない

商品情報を読むカードでは、背景を■#F5F5F5、見出しと本文を■#121212にします。■#C0C0C0の細い線を見出しの脇に添えると控えめな装飾になりますが、■#C0C0C0と■#F5F5F5のコントラスト比は約1.67:1しかありません。そのため、この組み合わせを重要なアイコンや操作に必要な枠線に使うのは避けます。

カード内の補足文字や、意味を持つアイコン・境界線を見分けやすくしたい場合は、濃いグレーの■#666666を検討します。■#666666と■#F5F5F5の比率は約5.27:1です。つまり、シルバーの雰囲気を残しながら、情報を伝える部分には十分な明暗差を持たせられます。

シルバーを使うときのコントラストと質感の注意点

WCAG（Webコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が必要です。操作を見分けるためのアイコンや境界など、意味のある非テキスト要素にも、隣接色との3:1以上が原則として求められます。単なる飾りの線は、操作に必要な線とは区別して考えます。

金属らしい見た目を出したいときは、単色のシルバーに頼るのではなく、写真の反射や控えめな明暗の変化も候補になります。ただし、グラデーションや写真の上に文字を重ねる場合は、文字が載る各部分でコントラストを確認してください。

HueRollではHEXコードで選んだ色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定は行いません。この記事の白系やグレーとの組み合わせの数値は、表示したカラーコードから別途計算しています。