トマトレッドに合う色は？明るいバナーを作る組み合わせ

トマトレッドに合わせるなら、温かい生成り色を広い背景に使い、深い葉緑を補助色にすると、赤の鮮やかさを残しながら情報を整理できます。ただし、明るい赤を見出しやボタンにそのまま使うと、白文字が見えにくくなることがあります。この記事では、トマトの直売フェアのバナーを例に、背景・見出し・日付・ボタンの役割を分けた2つの組み合わせを比較します。

トマトレッドには生成りと葉緑を合わせ、文字用の赤を少し濃くする

CSS（Webページの色や文字などの見た目を指定する仕組み）には、`tomato`という色名があり、そのHEXコードは■#FF6347です。ただし、一般にいう「トマトレッド」に唯一の数値があるわけではありません。ここではこの明るい赤を装飾用の参考色とし、文字やボタンには少し濃くしたトマトレッド■#C83A2Bを使います。HEX（ヘックス）は「#」と6桁の英数字で指定する色の形式です。

明るい赤■#FF6347と生成り■#FFF8EEのコントラスト比は約2.79:1ですが、濃いトマトレッド■#C83A2Bと生成りなら約4.86:1になります。コントラスト比は、文字色と背景色の相対的な明るさの差を表す数値です。通常サイズの見出しや説明に赤を使うなら、後者のように差を確保した色を選びます。

深い葉緑■#2C6047は生成り■#FFF8EEの上で約6.94:1、チャコール■#293942の説明文は約11.33:1です。赤だけですべての情報を目立たせず、産地や開催日時は葉緑、長めの説明はチャコールにすると、色の役割を分けられます。

直売フェアのバナーを生成り主体と赤い見出し帯で比べる

例えば「採れたてトマト直売フェア」の横長バナーでは、左側にイベント名・日時・案内ボタン、右側にトマトの写真を置きます。写真の赤と文字用の赤が重なって埋もれないよう、重要な文字は写真に載せず、単色の背景面に配置します。

• 生成りを主役にする案：広い背景を生成り■#FFF8EEにし、イベント名を濃いトマトレッド■#C83A2Bで表示します。小さな日付と会場名は深い葉緑■#2C6047にし、商品説明はチャコール■#293942にします。「開催情報を見る」のボタンは濃い赤■#C83A2Bの面と白■#FFFFFFの文字を組み合わせます。ボタン文字と面の比は約5.13:1、ボタン面と生成りの周囲は約4.86:1です。写真の横に明るいトマト色■#FF6347の短い飾り線を添える程度にします。
• 濃い赤の見出し帯を主役にする案：バナー上部の短い帯を濃いトマトレッド■#C83A2Bにし、見出しを白■#FFFFFFで置きます。文字と背景の比は約5.13:1です。帯の下は生成り■#FFF8EEを広く残し、日時は淡いセージグリーン■#DCEBCFのラベルに深い葉緑■#2C6047の文字で表示します。ラベル文字との比は約5.86:1です。「詳細を見る」のボタンは生成りの面に深い葉緑■#2C6047の塗りと白■#FFFFFFの文字を使い、文字とボタンの比を約7.31:1にします。

生成り主体の案は写真と文字の余白を明るく見せたいとき、赤い見出し帯の案はフェア名を最初に印象付けたいときに向きます。葉緑は赤と同じ面積まで増やさず、日時やボタンに絞ると、赤・緑が互いに競いすぎない構成になります。

白文字の見え方と淡いラベルの境界を調整する

明るいCSSのトマト色■#FF6347を背景にして白■#FFFFFFの文字を置くと、比は約2.95:1です。通常文字に必要な4.5:1を下回り、大きな文字の目安である3:1にもわずかに届きません。濃いトマトレッド■#C83A2Bなら白文字との比が約5.13:1になるため、塗り面の赤を濃くするほうが確実です。

淡いセージグリーン■#DCEBCFと生成り■#FFF8EEは約1.18:1で、ラベルの輪郭が弱くなる場合があります。必要な枠には深い葉緑■#2C6047を使うと、セージグリーンとの比は約5.86:1、生成りとは約6.94:1です。一方、濃いトマトレッド■#C83A2Bの小さな文字をセージグリーン上に置くと約4.11:1で、通常の文字の基準には不足します。ラベル文字は葉緑にします。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字には原則4.5:1以上、大きな文字には3:1以上が必要です。ボタンなどの操作部品を識別するために必要な視覚的手がかりは、隣接色と原則3:1以上が求められます。写真に直接文字を重ねる場合は、画像の明暗に応じて見え方が変わるため、単色の文字背景を設けることも検討します。

HueRollではHEXコードを入力して色を調整し、関連する配色候補や選択色と白・黒のコントラストを確認できます。ただし、任意の2色間の直接比較やWCAGの自動判定には対応していません。ここに示した赤・生成り・葉緑などの組み合わせは、別途2色ずつ計算しています。