黒に合う色は？おしゃれに見せる配色の考え方【#000000】

黒は、WebではCSSの色名 black が ■#000000 と定義されている最も暗い基本色です。強い明暗差を作りやすい一方、画面の広い範囲を黒で埋めると重く感じる場合があります。この記事では、黒を文字や見出し、限定した帯などに使い、明るい背景と低彩度の差し色を組み合わせて、すっきり見せやすい配色の考え方を紹介します。

黒には明るいニュートラルと低彩度の差し色を合わせる

■#000000 は非常に暗いため、ウォームオフホワイト ■#F5F1EA やソフトグレー ■#D7D4CE のような明るい色と組み合わせると、黒の存在感を保ちながら画面全体を重くしすぎずに済みます。本文や見出しに黒を使い、背景やカードは明るい色を広く取ると、色数を増やさずに明暗の階層を作れます。

アクセントカラーには、彩度（色の鮮やかさ）を抑えたティール ■#2F5D62 や、くすみバーガンディ ■#6A3F50 が候補です。どちらも黒とは違う色相（赤・黄・緑・青などの色み）を加えながら、明るい背景の上でボタンやリンクを目立たせやすい色です。

おしゃれに見せやすい3つの配色例

1. ウォームオフホワイトを広く使い、黒を文字に集中する

ページ背景をウォームオフホワイト ■#F5F1EA、カード背景をソフトグレー ■#D7D4CE、本文や見出しを黒 ■#000000 にします。コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、黒とオフホワイトで約18.65:1、黒とソフトグレーで約14.20:1です。黒を広い背景ではなく文字や見出しに集中すると、強い色を使いながら明るい余白を残せます。

2. ティールを主要ボタンやリンクに使う

主要ボタンをティール ■#2F5D62、ボタン文字を白 ■#FFFFFF にすると、コントラスト比は約7.34:1です。ウォームオフホワイト ■#F5F1EA 上でティールをリンク文字として使う場合も約6.52:1あります。黒とは別の色みを加えつつ、鮮やかさを抑えることで、落ち着いた画面の中に操作部分を作れます。

3. くすみバーガンディを小さな暖色アクセントにする

短いラベルや補助ボタンにくすみバーガンディ ■#6A3F50 を使うと、黒と明るい背景だけの配色に暖かい変化を加えられます。ウォームオフホワイト ■#F5F1EA 上のバーガンディは約7.65:1、バーガンディ背景に白 ■#FFFFFF を置く場合は約8.61:1です。ティールとバーガンディを同じ強さで併用せず、どちらか一方を主なアクセントにすると色数を抑えやすくなります。

黒と濃いアクセントを直接重ねず、面積と明暗差を確認する

黒 ■#000000 とティール ■#2F5D62 のコントラスト比は約2.86:1、黒とくすみバーガンディ ■#6A3F50 は約2.44:1です。どちらも色みは黒と異なりますが、通常サイズの文字と背景として直接重ねるには明暗差が足りません。濃いアクセントは明るい背景の上で独立させ、黒との間には余白や明るい面を入れます。

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