ダークグレーに合う色は？重く見せない配色のコツ

ダークグレーは、黒より明るく中間のグレーより深い色として使われる呼び方で、特定の1色に決まっているわけではありません。この記事では一例として ■#555555 を基準にします。暗い色を広く使いすぎて画面全体を重く見せるのではなく、明るい背景と落ち着いた差し色を組み合わせ、Webサイトの文字、カード、ボタンを見分けやすくする配色を考えます。

ダークグレーには明るい背景と低彩度の差し色を合わせる

■#555555 のようなダークグレーは、クールオフホワイト ■#F5F6F7 や淡いブルーグレー ■#D9DEE3 と合わせると、暗さを残しながら画面全体の明るい面積を増やせます。本文や見出しにダークグレーを使い、背景は明るい色を広く取ると、黒に近い色を大面積に使わずに情報を引き締められます。

差し色には、彩度（色の鮮やかさ）を抑えたブルー ■#3F5F7A やオーカー寄りのブラウン ■#80613B が候補です。どちらも明るい背景とのコントラストを確保しやすく、ダークグレーとは違う色みを足しながら、派手な印象になりにくい組み合わせです。

重く見せない3つの配色例

1. 明るい背景と淡いブルーグレーで面積を軽くする

ページ背景をクールオフホワイト ■#F5F6F7、カード背景を淡いブルーグレー ■#D9DEE3、本文や見出しをダークグレー ■#555555 にします。コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、ダークグレーとオフホワイトで約6.89:1、ダークグレーとブルーグレーで約5.51:1です。暗い色は文字に集中し、広い面を明るく保つことで、ダークグレーの落ち着きを残しながら重さを抑えられます。

2. 低彩度ブルーを主要ボタンやリンクに使う

主要ボタンを低彩度ブルー ■#3F5F7A、ボタン文字を白 ■#FFFFFF にすると、コントラスト比は約6.71:1です。クールオフホワイト ■#F5F6F7 上でブルーをリンク文字として使う場合は約6.20:1で、ボタン色と周囲の背景にも約6.20:1の差があります。暗いグレーとは別の色みを与えながら、操作部分を明確にできます。

3. オーカー系ブラウンを小さな暖色アクセントにする

短いラベルや補助ボタンにオーカー寄りのブラウン ■#80613B を使うと、無彩色中心の画面に少し暖かい変化を付けられます。クールオフホワイト ■#F5F6F7 上のブラウンは約5.26:1、ブラウン背景に白 ■#FFFFFF を置く場合は約5.69:1です。低彩度ブルーとブラウンを同じ強さで併用せず、どちらかを主な差し色にすると、暗色が増えすぎません。

暗い色同士を重ねず、使う面積と文字のコントラストを確認する

ダークグレー ■#555555 と低彩度ブルー ■#3F5F7A のコントラスト比は約1.11:1、ダークグレーとオーカー系ブラウン ■#80613B は約1.31:1です。色相（赤・黄・緑・青などの色み）が違っていても明るさが近いため、この組み合わせを通常サイズの文字と背景として直接重ねるのは避けます。ダークグレーを背景に使う場合は白 ■#FFFFFF との比率が約7.46:1あるため、文字色は十分に明るい色へ切り替えます。

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