ライトグレーに合う色は？やわらかく見せる組み合わせ

ライトグレーは、白に近い明るさを持つ淡いグレーを指す色名として使われます。WebではCSSの色名 lightgray が ■#D3D3D3 と定義されていますが、日常的な「ライトグレー」には幅があります。この記事では ■#D3D3D3 を基準に、やわらかい明るさを残しながら、文字・カード・ボタンの役割がぼやけない配色を考えます。

ライトグレーには濃いニュートラルと低彩度の色を合わせる

■#D3D3D3 のようなライトグレーは、背景やカードに使いやすい一方、白や淡色だけで周囲をそろえると境界や情報の強弱が弱くなることがあります。本文にはチャコール ■#30343A のような十分に濃い色を使い、ページ背景にはオフホワイト ■#FAFAF7 を置くと、明るい画面のまま階層を作りやすくなります。

差し色には、彩度（色の鮮やかさ）を抑えたブルーグレー ■#3F5D73 やディープセージ ■#425748 が候補です。どちらもライトグレーと明るさに差があるため、やわらかな背景を保ちながらボタンやリンクに役割を持たせやすくなります。

やわらかく見せる3つの配色例

1. オフホワイトとチャコールで明るい面を整理する

ページ背景をオフホワイト ■#FAFAF7、カードや補助セクションをライトグレー ■#D3D3D3、本文をチャコール ■#30343A にします。コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、本文とライトグレーで約8.36:1、本文とオフホワイトで約11.97:1です。明るい面を2段階に分けながら、文字は1つの濃色にそろえられます。

2. ブルーグレーを主要ボタンやリンクに使う

主要ボタンをブルーグレー ■#3F5D73、ボタン文字を白 ■#FFFFFF にすると、コントラスト比は約6.94:1です。オフホワイト ■#FAFAF7 上でブルーグレーをリンク文字として使う場合は約6.64:1、ライトグレー ■#D3D3D3 上では約4.64:1です。寒色を少量加えることで、明るいグレー中心の画面に静かな変化を付けられます。

3. ディープセージを落ち着いた自然色のアクセントにする

補助ボタンや短いラベルにディープセージ ■#425748 を使うと、ライトグレーの無彩色感を残しつつ自然色の変化を加えられます。ライトグレー ■#D3D3D3 上のセージは約5.22:1、セージ背景に白 ■#FFFFFF を置く場合は約7.81:1です。ブルーグレーとセージを同じ強さで併用せず、どちらか一方を主な差し色にすると色数を抑えやすくなります。

白との差だけに頼らず、差し色同士も直接重ねない

ライトグレー ■#D3D3D3 と白 ■#FFFFFF のコントラスト比は約1.50:1です。明るさが近いため、重要な文字やカードの境界をこの差だけに頼るのは避けます。また、ブルーグレー ■#3F5D73 とディープセージ ■#425748 の比率も約1.13:1なので、この2色を通常サイズの文字と背景として直接重ねる用途には向きません。

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