黒に合うアクセントカラーは？強いコントラストを整えるコツ

黒を主役にした配色は、文字やアクセントとの明るさの差が大きくなりやすいため、目立たせたい色を増やしすぎると画面全体が強く見えることがあります。ここでは黒■#000000に、落ち着いたアンバー■#D7A43Bをアクセントとして合わせます。本文は純白より少し明度を落とした■#D8D3CA、見出しは■#F7F5F0に分け、強いコントラストを役割ごとに整理します。

黒には、明るいアンバーを小さな面積で使う

■#000000は非常に暗いため、明るい色を置くと強い差が生まれます。アクセントの■#D7A43Bは黒に対して約9.26:1あり、短いラベルや時刻、主要操作を目立たせる用途に使えます。ただし、アクセントを広い面積に増やすより、必要な場所だけに限定したほうが黒の落ち着きを保ちやすくなります。

本文には■#D8D3CAを使うと、黒とのコントラスト比は約14.09:1です。大見出しや重要なタイトルには■#F7F5F0を使い、黒との比率は約19.27:1です。本文と見出しで明るさを少し変えることで、すべてを純白にするより役割を分けやすくなります。

映画祭の上映スケジュールでは、アンバーを時刻と購入導線に使う

映画祭の上映スケジュールページを例にすると、ページ全体を■#000000、上映カードをチャコール■#191919にします。カード上の本文を■#D8D3CAにすると約11.80:1、見出しを■#F7F5F0にすると約16.14:1です。

アクセントの■#D7A43Bは、「18:30」「特別上映」などの短い情報を黒背景上で見せると約9.26:1、チャコール背景上でも約7.75:1です。「チケットを購入」ボタンを■#D7A43Bの背景にする場合は、文字を■#000000にすると約9.26:1です。■#FFFFFFでは約2.27:1しかないため、白文字にはしません。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が必要です。操作に必要な境界や状態などの非テキスト情報には、隣接色との3:1以上が基準になります。

強いコントラストを整えるなら、黒とチャコールの差だけに頼らない

■#000000と■#191919のコントラスト比は約1.19:1です。見た目では別の暗色でも、重要なカード境界や選択状態をこの差だけで示すのは避けます。境界が操作や情報理解に必要なら、たとえば■#686868の枠線を使うと、黒に対して約3.77:1、チャコールに対して約3.16:1です。

黒の配色では、すべてを最大限に明るくするのではなく、見出し、本文、アクセント、境界の役割を分けると強弱を作れます。HueRollでは■#000000を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。