ディープ・レッドに合う色は？深紅の落ち着きを活かす配色例【#981B1B】

ディープ・レッド（■#981B1B）は、赤の鮮やかさを残しながら明るさを抑えた深紅です。Webサイトでは、映画館やミニシアターの上映スケジュール・座席選択ページで、作品名、選択中の上映回、主要な「座席を選ぶ」ボタンなどに使うと、明るい赤よりも落ち着きを残した構成へまとめやすくなります。ただし、赤を広い面積へ重ねると、作品写真や上映時刻よりUIの存在感が強くなったり、販売中・完売などの状態を色だけで区別しやすくなったりします。ここでは、ウォームポーセリン、チャコールプラム、ミューテッドセージを合わせ、深紅の落ち着きを活かしながら上映情報を整理しやすい配色を考えます。

ウォームポーセリンを土台にし、セージで深紅へ穏やかな色相差を加える

■#981B1Bには、背景用のウォームポーセリン■#F7F2EE、本文や補助文字用のチャコールプラム■#342F30、アクセント用のミューテッドセージ■#B8C5A9を合わせる例が考えられます。

■#F7F2EEはわずかに暖かみを含む明色で、深紅との大きな明度差を作りながら、上映一覧や作品情報カードの面をやわらかくできます。■#342F30は赤紫をわずかに含む低彩度の濃色なので、上映時刻、上映時間、劇場名、注意事項などを赤一色にせず整理できます。■#B8C5A9は緑寄りの低彩度色で、赤から色相を離しつつ鮮やかさを抑えているため、深紅を主役にした画面へ穏やかな変化を加えられます。

上映スケジュールでは、ディープ・レッドを作品名と主要操作に集める

実装では、上映一覧や作品情報カードの広い背景を■#F7F2EEにし、作品名、選択中の上映回、主要な「座席を選ぶ」ボタン背景などへ■#981B1Bを使います。その上の文字は■#F7F2EEにすると、深紅の面でも通常文字に必要なコントラストを確保できます。上映時刻、上映時間、劇場名、料金条件は■#342F30へ分けると、ディープ・レッドを要点と主要操作へ限定できます。

UI（ユーザーが操作するボタンや座席選択などの画面部品）の補助操作には、濃い■#981B1Bの面に■#B8C5A9の小さな「詳細を見る」ボタンやラベルを置き、その文字を■#342F30にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#981B1Bと■#F7F2EEは約7.53:1、■#342F30と■#F7F2EEは約11.84:1、■#342F30と■#B8C5A9は約7.27:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#981B1Bと■#B8C5A9は約4.62:1なので、濃い赤の面に置く意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

落ち着きを活かすなら、販売状態や座席選択を赤だけで伝えない

■#B8C5A9と■#F7F2EEのコントラスト比は約1.63:1です。そのため、明るい背景上の通常文字には使わず、ボタンや座席の存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#981B1Bや■#342F30の枠線・文字を組み合わせます。

また、「販売中」「残席わずか」「完売」や「選択中」の座席は、赤やセージなどの色だけで区別せず、状態名の文字、チェックマーク、記号、太めの枠線なども併用します。映画のポスターや作品写真に赤が多い場合は、ページ全体へさらに赤を増やすより、■#F7F2EEの余白や情報カードを十分に残す方が、作品ビジュアルと操作を分けやすくなります。HueRollでは■#981B1BをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。