ルビーレッドとチャコールグレーの組み合わせ｜見出しを引き立てる配色

ルビーレッドとチャコールグレーを組み合わせると、濃い背景の中に明るい見出しを置き、赤で重要な情報を示す配色が作れます。ただし、鮮やかな赤を見出しやボタンに使いすぎると、強調したい場所が分からなくなります。ここではライブ告知ページを例に、見出しの階層と色の役割を整理します。

チャコールグレーを土台にして、ルビーレッドを絞って使う

ルビーレッドは、宝石のルビーを思わせる少し紫みを帯びた赤です。色名資料の一例に■#D12E59がありますが、色名だけで全ての見本が同じ数値になるわけではありません。この記事ではこの色を基準とします。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で指定する表記です。

合わせるチャコールグレーには■#272B2E、明るい背景には少し温かみのある白■#F7F4F2を選びます。濃いグレーは大きな見出し帯、明るい白は長い説明文の背景に使用します。ルビーレッド■#D12E59は短いラベルや目印に限定し、小さめの見出しには色を濃く調整した■#9E2247を使います。

濃いグレーに鮮やかな赤を直接重ねると、色は違っていても明るさの差が不足する場合があります。色を目立たせるために増やすより、赤を明るい背景側に置くことがポイントです。

ライブ告知ページの見出しを整理する配色例

小さなライブの開催案内ページを想定します。最初の大きな見出し帯はチャコールグレー■#272B2Eの背景に、やわらかな白■#F7F4F2で「ライブ開催のお知らせ」と表示します。見出しの周囲に余白を確保し、ここには赤い文字を増やしません。

• 本文エリア：やわらかな白■#F7F4F2を広く使い、説明文はチャコールグレー■#272B2Eにする。
• 「日時・会場」などの節見出し：濃いルビーレッド■#9E2247を文字色にし、本文より大きいサイズと太さで区切る。
• 節の中の小見出し：チャコールグレー■#272B2Eを使い、赤い節見出しより控えめな階層にする。
• 「予約受付中」の短いラベル：ルビーレッド■#D12E59を背景に、白■#FFFFFFの文字を載せる。
• 料金などの情報カード：薄いグレー■#E9E6E7の背景に濃い文字■#272B2Eを置く。周囲と混ざる場合は余白や輪郭も加える。
• 「チケットを確認」ボタン：濃いルビーレッド■#9E2247を背景に、白■#FFFFFFの文字を載せる。

見出しは、大きな案内・節見出し・小見出しの順に、位置や余白もそろえます。赤い要素がラベルと節見出しとボタンの全てに登場しても、背景色と文字色、形が異なれば役割を区別できます。意味や操作は色だけに任せず、必ず文言でも伝えましょう。

明るさの差を計算し、見出しの使い分けを調整する

文字と背景の明るさの差を表す数値がコントラスト比です。Webのアクセシビリティ指針WCAG 2.2のAA基準では、通常の文字は4.5対1以上、大きな文字は3対1以上が必要です。

チャコールグレー■#272B2Eとやわらかな白■#F7F4F2の組み合わせは約13.03対1です。ルビーレッド■#D12E59の文字を同じ明るい背景■#F7F4F2に載せると約4.52対1で通常文字の基準をわずかに上回りますが、細い文字で多用するより、濃いルビーレッド■#9E2247を使うほうが約6.91対1と余裕があります。

一方、ルビーレッド■#D12E59とチャコールグレー■#272B2Eの比は約2.89対1で、大きな文字の基準にも届きません。赤い文字を濃い見出し帯に重ねない理由です。ラベルの白■#FFFFFFとルビーレッド■#D12E59は約4.95対1、ボタンの白■#FFFFFFと濃いルビーレッド■#9E2247は約7.57対1です。

薄いグレー■#E9E6E7のカードと周囲の白系背景■#F7F4F2は約1.13対1しかありません。カードの区切りは色の違いだけでなく、十分な余白や枠線でも示してください。文字サイズ、表示環境、写真の重なりによって見え方が変わるため、実際の画面でも確認します。