ダーク・レッドに合う色は？深い赤を落ち着いて見せる配色例【#7A1F1F】

ダーク・レッド（■#7A1F1F）は、鮮やかさを抑えた深い赤です。Webサイトでは、出版社や書籍の紹介ページで、書名、章見出し、主要な購入・試し読みボタンなどに使うと、鮮やかな赤よりも落ち着いた強調色として扱いやすくなります。ただし、赤やローズ系を広く使うと、表紙画像や本文よりUIの存在感が強くなりやすく、紙版・電子版などの選択状態が色だけに頼る場合もあります。ここでは、ウォームアイボリー、チャコールプラム、ミューテッドブルーグレーを合わせ、深い赤を落ち着いて見せながら書籍情報を整理しやすい配色を考えます。

ウォームアイボリーを土台にし、ブルーグレーで赤に静かな距離を作る

■#7A1F1Fには、背景用のウォームアイボリー■#FAF4EE、本文や補助文字用のチャコールプラム■#3D3537、アクセント用のミューテッドブルーグレー■#B9C8D8を合わせる例が考えられます。

■#FAF4EEはわずかに黄みを含む明色で、深い赤との明度差を作りながら本文や書誌情報の面をやわらかくできます。■#3D3537は赤紫をわずかに含む低彩度の濃色なので、著者名、発売日、仕様、説明文などを主役色より控えめに整理できます。■#B9C8D8は青寄りの低彩度色で、赤から色相を離しながら鮮やかさを上げすぎず、赤系に偏った画面へ静かな変化を加えられます。

書籍紹介ページでは、ダーク・レッドを書名と主要操作に集める

実装では、あらすじや書誌情報カードの広い背景を■#FAF4EEにし、書名、章見出し、主要な「購入する」「試し読み」ボタン背景などへ■#7A1F1Fを使います。著者情報や仕様、補足説明は■#3D3537へ分けると、深い赤を要点と主要操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#7A1F1Fの面に■#B9C8D8の小さな副ボタンやラベルを置き、その文字を■#3D3537にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#7A1F1Fと■#FAF4EEは約9.42:1、■#3D3537と■#FAF4EEは約10.91:1、■#3D3537と■#B9C8D8は約6.99:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#7A1F1Fと■#B9C8D8は約6.03:1なので、濃い赤の面に置く意味のあるUI部品の境界として必要な3:1以上も確保できます。

落ち着いて見せるなら、選択状態と表紙の赤を色だけで整理しない

■#B9C8D8と■#FAF4EEのコントラスト比は約1.56:1です。そのため、明るい背景上の通常文字には使わず、ボタンやカードの存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#7A1F1Fや■#3D3537の枠線・文字を組み合わせます。

また、紙版・電子版、通常版・特装版などの選択状態は、赤やブルーグレーなどの色だけで区別せず、枠線、チェックマーク、「選択中」の文字なども併用します。表紙画像自体に赤が多い場合は、ページ全体へ赤を増やすより、■#FAF4EEの余白を十分に残す方が表紙と操作を分けやすくなります。HueRollでは■#7A1F1FをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。