カシス色に合う色を選ぶ｜バナーの背景と装飾の組み合わせ

カシス色は、黒スグリの実を思わせる深い赤紫色です。カシスの色名に対応するHEXコードは一つに決まっていないため、この記事では制作例としてカシス色■#5A2D46を使います。濃い色のバナーは背景と文字を同じように暗くすると、商品名や案内が埋もれがちです。ここではカシスを使った焼き菓子フェアの告知を例に、背景と装飾の色の組み合わせを考えます。HEX（ヘックス）は、Web上の色を6桁の英数字で指定するコードです。

カシス色に合わせる色は、背景・文字・装飾の役割で選ぶ

カシス色■#5A2D46は暗い赤紫なので、広い背景に使うなら明るい文字を、文字やボタンに使うなら明るい背景を合わせると役割を分けやすくなります。次の3色は、それぞれ違う目的で取り入れます。

• アイボリー■#FAF5ED：広い背景や暗いカシス色の上の文字に。黄みのある淡色で、濃い赤紫との明るさの差を作れます。
• 淡いローズ■#EBCBD6：開催日や商品情報を載せる小さなパネルに。カシス色と近い赤紫系でも明るさが異なり、色みをそろえながら区画を作れます。
• シャンパンゴールド風の黄土色■#D8B77B：短い飾り線や小さな図形に。実際の金属光沢を再現する色ではありませんが、カシス色の上に置くと黄みのアクセントを加えられます。

これらを同じ面積で並べるのではなく、背景は1色を広く、文字は明暗差を優先し、装飾は情報の邪魔にならない量に絞ると整理しやすくなります。

焼き菓子フェアのバナーで背景と装飾を入れ替える

案A：明るい背景で商品を紹介する。バナー全体をアイボリー■#FAF5EDにし、「カシスと焼き菓子のフェア」という見出しはカシス色■#5A2D46で表示します。この組み合わせのコントラスト比は約10.19:1です。コントラスト比は文字と背景の明るさの差を数値で表したものです。会期などの補足文は濃いプラム■#342632にしても、アイボリーとの比は約13.17:1あります。

装飾には淡いローズ■#EBCBD6を小さな角丸の面として加えます。ただしアイボリーとのコントラスト比は約1.38:1なので、色の境目だけで重要な情報を区切らず、余白や見出しも使います。申込みボタンはカシス色■#5A2D46の背景にアイボリー■#FAF5EDの文字を載せ、約10.19:1を確保します。

案B：カシス色を背景の主役にする。背景をカシス色■#5A2D46にし、見出しをアイボリー■#FAF5EDにすると約10.19:1のコントラスト比です。会期は淡いローズ■#EBCBD6のパネルに濃いプラム■#342632の文字で載せると約9.56:1です。カシス色とローズの境界にも約7.40:1の差があります。

シャンパンゴールド風の黄土色■#D8B77Bは背景のカシス色■#5A2D46に細い飾り線として添えます。両色の比は約5.78:1ですが、線を増やしすぎず、見出しの周囲などに限定します。申込みボタンはアイボリー■#FAF5EDを背景にカシス色■#5A2D46の文字を使えば約10.19:1です。背景が暗い案でも、装飾と操作ボタンの役割を分けられます。

装飾色を文字や重要な表示に流用しない

黄土色■#D8B77Bとアイボリー■#FAF5EDのコントラスト比は約1.76:1です。明るい背景にこの黄土色で小さな文字を書いたり、意味を伝える線だけを描いたりするのは避けます。また、カシス色■#5A2D46の文字とアイボリー■#FAF5EDの背景が読めても、写真やグラデーションの上では比率が変わるため、文字の直下の色で再確認が必要です。

WCAG 2.2というWebのアクセシビリティ指針では、レベルAAの通常の文字に4.5:1以上、大きな文字に3:1以上のコントラスト比を求めています。操作部品や意味のある図形では、必要な表示部分と隣接色との3:1以上が求められる場合があります。装飾のみの線と、内容を伝える線は分けて判断しましょう。

HueRollではHEXコードを入力して各色を調整でき、選択色と白・黒とのコントラスト比を確認できます。ただし任意の2色間の比較やAA判定は自動ではできないため、実際のバナーで隣り合う色を別途確認してください。