ルビーレッドのカラーコードと配色例｜見出しやボタンに使うには

ルビーレッドは、宝石のルビーを思わせる深い赤です。Webサイトの見出しやボタンに使う場合、鮮やかな赤を増やすより、周囲の背景と文字色を先に決めるほうが整理しやすくなります。代表的なカラーコードを確認し、明るいページで使う場合と、赤い背景を広く使う場合の2つの配色例を比べます。

ルビーレッドのコードと文字色の選び方

ルビーレッドのWeb向け色見本には■#9B111E（RGB：赤155・緑17・青30）という例があります。RGBは赤・緑・青の強さで色を表す形式、HEXはそれを16進数のコードで指定する方法です。この色は「RAL 3003 Ruby red」のデジタル表現例としても紹介されていますが、塗料の実物色を画面で完全に再現する数値という意味ではありません。色名だけで数値は一つに定まりません。

また、色見本で「Ruby（ルビー）」と呼ばれる■#E0115Fは、より明るく赤紫寄りの別の例です。今回の配色では濃いルビーレッド■#9B111Eを基準にします。CSS（Webページの見た目を指定するスタイルの仕組み）で色を管理するときも、色名の解釈に頼らずHEXを指定すると混同を避けられます。

ルビーレッド■#9B111Eと白■#FFFFFFのコントラスト比（2色の明るさの差）は約8.42:1です。濃い赤には白文字を合わせられます。一方、ルビーの色見本■#E0115Fと白は約4.76:1と差が小さくなるため、色コードを変えたときは文字色も改めて確認しましょう。

見出しとボタンに使う2つの配色例

展示会の受付ページ：明るい背景に赤い見出しとボタン

展示会の申込みページなら、背景を温かいオフホワイト■#FCF8F5、見出しと「来場予約」ボタンをルビーレッド■#9B111E、本文を濃い青灰■#263945にします。見出しと背景の比は約7.98:1、本文と背景は約11.34:1です。赤を見出しと一つの主要操作に絞ることで、背景全体を赤くせずに重要な場所を示せます。

ボタン内の文字は白■#FFFFFFにすると約8.42:1で、ボタンとオフホワイトの周囲も約7.98:1です。開催日などの情報は淡いローズ■#F7E5E7のパネルに置き、文字を濃い青灰■#263945にすれば約9.87:1になります。ただしパネルとページ背景の差は約1.15:1と小さいため、区切りが必要なら灰みのある赤茶■#8A6267の枠を加えましょう。枠とパネルの比は約4.30:1です。

公演の告知画面：赤い背景に明るい文字と金色のボタン

演奏会の告知ページでは、上部をルビーレッド■#9B111Eで広く塗り、見出しをアイボリー■#FFF8EEにします。文字と背景の比は約7.99:1です。日付や会場は淡いローズ■#F7E5E7の小さな案内面にまとめ、濃い青灰■#263945の文字を載せると約9.87:1になります。案内面と赤い背景の差も約6.95:1あります。

「チケットを予約する」ボタンは淡い金色■#E8CF92を使い、文字は濃い青灰■#263945にします。文字とボタンの比は約7.85:1、金色のボタンとルビーレッド背景の比は約5.52:1です。金色はボタンなど小さな面積にとどめ、見出しや装飾まで同じ色で増やさないほうが視線の優先順位を整えやすくなります。

赤を増やす前に確認したい文字と操作のコントラスト

ボタンが埋もれて見えるときは、色そのものを派手にする前に、ボタンの周囲が同じ赤になっていないか確認しましょう。赤い背景に赤いボタンを置く場合は、余白や別の背景面が必要です。また、予約・販売・エラーなどの意味を赤だけに任せず、具体的なボタン文言や表示内容で伝えます。色の効果は写真や面積、周囲の色によって変わります。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常の文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。操作部品やその状態を識別するために重要な視覚情報には、隣接色との3:1以上が必要になる場合があります。HueRollではHEXから関連色や配色候補を探し、選択色と白・黒の比を確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定には対応していないため、完成画面の組み合わせは別途検証してください。