茜色に合う色は？深みを活かす配色と組み合わせ例

茜色（あかねいろ）に合わせる色を選ぶなら、深い赤をどれだけ広く使うかを先に決めましょう。生成りのような明るい色なら赤の深みを活かしやすく、濃紺は文字や枠の引き締め役になります。控えめな金色を添える方法もありますが、すべてを同じ強さで使うと情報が散らばることがあります。今回は「秋の新刊予約ページ」を例に、茜色を大きな背景にする案と、予約ボタンに絞って使う案を比較します。

茜色に合う色は生成り・濃紺・落ち着いた金色

茜色は、アカネという植物の根を使った染色に由来する日本の伝統色です。和色大辞典の色見本では深い赤の■#B7282Eが掲載され、RGB（アールジービー）では赤183・緑40・青46となります。RGBは画面の色を赤・緑・青の光の成分で表す形式です。色名の数値は資料によって違い、別の対照資料には■#B13546という見本もあります。今回は■#B7282Eを基準にします。HEX（ヘックス）はWebの色を6桁の英数字で指定するコードです。

明るい生成り■#FAF6EFを合わせると、茜色■#B7282Eとのコントラスト比は約5.81:1です。コントラスト比は、隣り合う色の明るさの差を数値で示すものです。生成りの背景に茜色の短い見出しを載せる方法も考えられますが、通常の文章には濃紺■#223A57を使うと生成りとの比が約10.76:1になります。

装飾の差し色には、くすんだ金色風の黄■#D5B986を少量使う案があります。茜色■#B7282Eとこの黄の比は約3.31:1で、色の面を分ける助けになります。金色風の黄に濃紺■#223A57の文字を載せると約6.14:1です。ただし金属の光沢は単色では再現できません。ここでの金色は落ち着いた黄色の提案であり、特定の伝統色名ではありません。

秋の新刊予約ページで背景とボタンを入れ替える2つの配色

案1：茜色を表紙のような広い背景にする。「秋の新刊・先行予約」という見出しと短い紹介文を、茜色■#B7282Eの背景に白■#FFFFFFで載せます。文字と背景の比は約6.26:1です。「初回限定」の小さな案内ラベルには金色風の黄■#D5B986を使い、文字を濃紺■#223A57にすると約6.14:1になります。ラベルと外側の茜色は約3.31:1なので、見出しを飾りつつ案内を分けられます。

「予約する」ボタンは生成り■#FAF6EFで塗り、文字を墨色に近い濃色■#25323Cにすると約12.18:1です。ボタンと外側の茜色■#B7282Eも約5.81:1の差があります。価格や発送予定日は下の生成りの区画にまとめ、濃紺■#223A57の文字で約10.76:1を確保します。赤の面積が大きくても、読む情報や操作は明るさの違いで区切る構成です。

案2：生成りを広い背景にして、茜色を予約ボタンに使う。作品紹介が長いページでは生成り■#FAF6EFを主な背景にし、見出しと説明を濃紺■#223A57にします。文字と背景は約10.76:1です。「今すぐ予約する」ボタンだけを茜色■#B7282Eの背景にして、白■#FFFFFFの文字を載せると約6.26:1、ボタンと周囲の生成りは約5.81:1です。茜色を強調する情報に集中させる方法です。

書籍の仕様や特典を淡い赤みのある紙色■#F2E3DCのカードにまとめ、文字を濃色■#25323Cにすると約10.50:1になります。ただしカードと生成り■#FAF6EFは約1.16:1なので、必要な境界には濃紺■#223A57の枠を付けます。枠とカード内側は約9.28:1、外側の生成りとは約10.76:1です。金色風の黄■#D5B986は飾り線など小さな場所に留め、重要な区切りには使いません。

濃い赤同士の文字と、淡い金色の境界に注意する

茜色■#B7282Eの上に墨色に近い濃色■#25323Cで小さな文字を置くと、比は約2.10:1です。赤い背景では白■#FFFFFFに切り替えましょう。また、金色風の黄■#D5B986と生成り■#FAF6EFの比は約1.75:1しかありません。案内欄や操作部品の識別をこの2色の境界だけに頼らず、濃い枠や明確な見出しを加えてください。

基準の茜色■#B7282Eと別資料の茜色■#B13546の比も約1.03:1です。「受付中」「受付終了」などを赤の濃淡だけで伝えるのではなく、言葉や形を添えましょう。WCAG 2.2というWebのアクセシビリティ指針のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。操作に必要な枠など、文字以外の重要な情報にも隣接色との3:1以上が必要な場合があります。

HueRollではHEXを入力して色を調整し、選択した色と白・黒のコントラスト比を確認できます。ただし、任意の2色間の比較やAA・AAAの自動判定には対応していません。背景・文字・ラベル・ボタンが実際に接する色は、組み合わせごとに別途確認してください。