リッチ・レッドに合う色は？深みのある赤を重厚に引き立てる配色例【#B81414】

リッチ・レッド（■#B81414）は、鮮やかさを残しながら明るさを抑えた深い赤です。Webサイトでは、出版社の文芸作品・書籍詳細ページで、シリーズ名、作品名のアクセント、主要な「試し読み」ボタンなどに使うと、深い赤を重厚に見せながら本文や書影を整理しやすくなります。赤を広い背景へ使いすぎるとページ全体の圧が強くなりやすいため、明るい紙色の背景と低彩度の寒色を組み合わせ、赤を要点に限定するのが扱いやすい方法です。ここでは、ウォームパーチメント、インクブラウン、スレートブルーを合わせます。

ウォームパーチメントを土台にし、スレートブルーで深い赤の重さを整える

■#B81414には、背景用のウォームパーチメント■#FAF5EC、本文や補助文字用のインクブラウン■#2D2426、補助操作用のスレートブルー■#5F7286を合わせる例が考えられます。

■#FAF5ECは紙を思わせる暖かい明色で、深い赤との大きな明度差を作れます。■#2D2426は赤みをわずかに含む低彩度の濃色なので、あらすじ、著者名、発売日、価格などを落ち着いて整理できます。■#5F7286は青みを含む低彩度色で、赤から色相を離しながら鮮やかさを抑えているため、補助操作を分けつつ、主役の赤と競合しにくい組み合わせです。

書籍詳細では、リッチ・レッドを作品名と主要操作に集める

実装では、本文や書影周囲の広い背景を■#FAF5ECにし、シリーズ名、作品名の一部、主要な「試し読み」ボタン背景へ■#B81414を使います。その上の文字は■#FAF5ECにすると、コントラスト比は約6.14:1となり、通常サイズの文字に必要な基準を満たします。あらすじ、著者情報、発売日、価格などは■#2D2426へ分けると、赤を主要な情報と操作へ限定できます。

UI（ユーザーが操作するボタンや切り替えなどの画面部品）の補助操作には、■#5F7286を「著者紹介を見る」などのボタン背景に使い、その上の文字を■#FAF5ECにします。スレートブルーと背景のコントラスト比は約4.56:1なので、文字だけでなくボタンの面そのものも明るい背景から識別できます。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#2D2426と■#FAF5ECは約13.89:1、■#B81414と■#FAF5ECは約6.14:1、■#5F7286と■#FAF5ECは約4.56:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。主要ボタンと補助ボタンの面も明るい背景に対して3:1以上あるため、意味のあるUI部品の境界として使えます。

重厚に見せるなら、赤とスレートの色差だけで状態を伝えない

■#B81414と■#5F7286のコントラスト比は約1.35:1です。そのため、「選択中」と「未選択」、「試し読み可能」と「準備中」などの状態をこの2色だけで分けるのは避け、状態名の文字、下線、チェックマーク、枠線の形なども併用します。

また、書影そのものに深い赤が多い場合は、ページ全体へさらに■#B81414を広げるより、■#FAF5ECの余白を残す方が、書影と操作を分けやすくなります。HueRollでは■#B81414をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。