グレーに合う色は？落ち着いた配色とアクセントカラー【#808080】

グレーは白と黒の間にある無彩色の総称で、明るさによって多くの段階があります。WebではCSSの色名 gray が ■#808080 と定義されています。この記事ではこの ■#808080 を基準に、落ち着いた雰囲気を保ちながら、背景・文字・カード・ボタンに必要なメリハリを付ける配色を考えます。

グレーには明るい背景と深い低彩度色を合わせる

■#808080 のような中間のグレーは、色みを持たないため多くの色と合わせやすい一方、白に近い背景の上で通常サイズの文字に使うとコントラストが不足する場合があります。本文はチャコール ■#262626 のような十分に濃い色にし、ページ背景はオフホワイト ■#F7F7F4、補助面は淡いグレー ■#E1E4E3 にすると、落ち着いたまま情報を分けやすくなります。

アクセントカラーには、彩度（色の鮮やかさ）を抑えたネイビー ■#31485A やオーカー系ブラウン ■#715A2E が候補です。どちらも明るい背景とのコントラストを確保しやすく、グレー中心の画面に寒色または暖色の変化を少量加えられます。

落ち着きを保つ3つの配色例

1. オフホワイトとチャコールでグレーを補助色にする

ページ背景をオフホワイト ■#F7F7F4、本文をチャコール ■#262626、区切り線や補助的な面をグレー ■#808080 にします。本文と背景のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約14.10:1です。一方、グレーと背景は約3.68:1なので、■#808080 を通常サイズの本文文字として使うのではなく、境界線、アイコン、広めの帯など役割を限定するのが安全です。

2. 低彩度ネイビーを主要ボタンやリンクに使う

主要ボタンを低彩度ネイビー ■#31485A、ボタン文字を白 ■#FFFFFF にすると、コントラスト比は約9.52:1です。オフホワイト ■#F7F7F4 上でネイビーをリンク文字に使う場合も約8.87:1あります。グレーの静かな印象を崩さず、操作部分だけを明確にしたいときに使いやすい組み合わせです。

3. オーカー系ブラウンで暖かいアクセントを足す

短いラベルや補助ボタンにオーカー系ブラウン ■#715A2E を使うと、無彩色中心の配色に少し暖かい変化を加えられます。オフホワイト ■#F7F7F4 上のブラウンは約6.11:1、ブラウン背景に白 ■#FFFFFF を置く場合は約6.55:1です。ネイビーとブラウンを同じ強さで併用せず、どちらか一方を主なアクセントにすると色数を抑えやすくなります。

グレーを文字や背景に使うときは白黒との違いを確認する

基準のグレー ■#808080 を背景にした場合、黒 ■#000000 とのコントラスト比は約5.32:1ですが、白 ■#FFFFFF とは約3.95:1です。通常サイズの文字では、黒は4.5:1以上を満たしますが白は届きません。また、グレーと低彩度ネイビー ■#31485A は約2.41:1、グレーとオーカー系ブラウン ■#715A2E は約1.66:1なので、これらを通常文字と背景として直接重ねるのも避けます。

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