鮮やかな赤背景に文字を載せるときの配色ポイント

鮮やかな赤はイベント告知の背景に使うと目を引く一方、「赤背景には白文字」と決めてしまうと、開催日時や申込み条件などの小さな文字が読みにくくなる場合があります。赤の存在感を残しながら情報を伝えるには、文字色を背景と組み合わせて数値で確かめ、情報の役割ごとに使い分けることが大切です。ここではライブ配信イベントの告知バナーを例に考えます。

鮮やかな赤と白文字の組み合わせを数値で確認する

WEBカラーのHEXコードとは、赤・緑・青の成分を16進数で表す色の指定方法です。たとえば鮮やかな赤■#FF3D3Dに白■#FFFFFFの文字を重ねると、コントラスト比は約3.51:1です。コントラスト比は文字と背景の相対的な明るさの差を示す値で、色の種類が大きく違っても十分な差があるとは限りません。

WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）のレベルAAでは、通常サイズの文字は背景との比率が4.5:1以上、条件を満たす大きな文字は3:1以上必要です。この赤■#FF3D3Dと白■#FFFFFFの組み合わせは通常文字の基準に届きません。大きな見出しで使える場合があっても、同じ色を小さな日時や注意書きに流用しないことが重要です。

背景の鮮やかな赤■#FF3D3Dをそのまま使いたいなら、文字を深いチャコール■#111827にする方法があります。この2色の比率は約5.06:1で、通常サイズの文字の4.5:1を上回ります。「赤には白が定番」という印象より、実際に読ませる文字の条件を優先しましょう。

ライブ配信の告知バナーで色の役割を分ける

例えば「週末ライブ配信・参加受付中」という告知を作るなら、メインの帯を鮮やかな赤■#FF3D3Dにし、イベント名や開催日時を深いチャコール■#111827で表示します。見出しと日付のどちらも赤背景との比率は約5.06:1です。大見出しだけに白を使う構成より、文字サイズが混在しても確認しやすくなります。

出演者紹介や視聴方法など、少し長い説明は赤い帯に詰め込まず、下の淡いアイボリー■#FFF7F2の面へ移します。そこにチャコール■#111827の本文を置けば、比率は約16.76:1です。赤を強調したい見出し部分と、落ち着いて読んでほしい説明部分を分けると、色の強さだけに頼らず情報を整理できます。

「配信に申し込む」ボタンを赤い帯の中に置く場合は、背景を濃いネイビー■#183153、文字を白■#FFFFFFにする例があります。ボタン内の文字と背景は約13.10:1、ボタンのネイビー■#183153と周囲の鮮やかな赤■#FF3D3Dは約3.73:1です。操作部品を識別するために必要な表示には、隣接色との3:1以上のコントラストが原則として求められます。色の差だけでなく、余白や四角い形でもボタンを示しましょう。

白文字で統一する必要があるなら、背景の赤そのものを深い赤■#B91C1Cに変える選択肢もあります。白■#FFFFFFとの比率は約6.47:1で、通常文字にも使える組み合わせです。鮮やかな赤■#FF3D3Dを装飾や周囲の面に残し、文字の下だけ深い赤に切り替える方法も考えられます。ただし濃い赤と鮮やかな赤の境界は約1.84:1なので、区画の違いを色だけで示さず、位置や余白でも区切ります。

小さな文字・操作状態・表示環境で最終確認する

コントラストが基準以上でも、細い書体や小さな文字は画面によって見づらくなる場合があります。開催日時、注意事項、申込み期限はスマートフォンでも読める大きさを確保し、「受付終了」のような状態は赤色だけに頼らず文字で明示してください。

ボタンにキーボードで移動したときは、操作中の位置を示すフォーカス枠も必要です。たとえばボタンの外側に白■#FFFFFFの輪郭を付ける場合、周囲の赤■#FF3D3Dとの差は約3.51:1、内側のネイビー■#183153との差は約13.10:1です。ホバー時などに色を変えるなら、その状態でも文字と背景、必要な操作表示と隣接色を確認します。

HueRollでは選んだ色と白・黒とのコントラスト比を確認できます。ただし、ネイビーと赤のような任意の2色の比較や、AA・AAAの自動判定はできません。HEXコードを選ぶ参考に使い、今回のような色同士の比率は別途計算して、完成した画面でも確かめましょう。