紫紺に合う色を選ぶには？背景とアクセントの配色例

紫紺（しこん）は、深い紫と紺色の雰囲気をあわせ持つ色です。主役にすると画面が引き締まりますが、濃い色ばかりを重ねると文字やボタンが埋もれやすくなります。背景を明るくする場合と、紫紺を背景にする場合では、合うアクセントの役割も変わります。用途別の2つの配色を見比べてみましょう。

紫紺に合わせる色は、背景の明るさから選ぶ

紫紺は紫みの強い暗い紺色を指す和色です。「和色大辞典」は■#460E44、「I-IRO」は■#402842を色見本としています。HEX（16進数でWebの色を指定するコード）は色を再現するための数値です。伝統色の名前に一つだけの数値が決まっているわけではないため、この記事では前者を基準にします。

紫紺を見出しやボタンの色にするなら、広い背景はアイボリーなどの明るい色にすると濃さが引き立ちます。逆に紫紺を大きな背景に使うなら、文字は明るくし、アクセントに淡い緑や金色系を少量足すと役割を分けやすくなります。差し色の印象は面積と周囲の色で変わるので、鮮やかさだけで判断しないことが大切です。

背景とアクセントの配色例を2パターンで比較

明るい商品紹介ページ：アイボリーと柔らかな金色

和雑貨や工芸品の紹介ページなら、背景にアイボリー■#F8F4EC、見出しに紫紺■#460E44、本文に暗いグレー■#2D2930を組み合わせます。紫紺と背景のコントラスト比（2色の明るさの差）は約13.61:1、本文と背景は約13.01:1です。広い面を明るくすることで、濃い見出しが重くなりすぎません。

アクセントには柔らかな金色■#E6C879を小さな案内ラベルの背景に使い、文字は暗いグレー■#2D2930にします。文字との比は約8.77:1です。ただし金色とアイボリーの差は約1.48:1なので、ラベルの輪郭が重要なら文字や配置、枠でも識別できるようにします。購入ボタンは紫紺■#460E44の背景に白■#FFFFFFの文字を載せると約14.93:1です。

濃い告知ページ：紫紺の背景とミント系の差し色

イベントの告知や申し込みを促すページなら、紫紺■#460E44を大きな背景に使う方法があります。見出しはアイボリー■#F8F4EC、説明文は淡い灰紫■#F2EBF0とし、背景との比はそれぞれ約13.61:1、約12.74:1です。白に近い文字を中心にすると、深い紫の雰囲気を残しながら内容を確認できます。

申し込みボタンには淡いミント■#A9E2D1を使い、文字を紫紺■#460E44にします。文字とボタンの比は約10.30:1で、ボタンと周囲の紫紺背景の差も約10.30:1です。金色より涼しげな方向に変わるため、紫紺の重さを軽く見せたい場面の候補になります。

差し色の面積と文字のコントラストに注意する

紫紺■#460E44に黒■#000000の文字を直接重ねると、比は約1.41:1で通常の文章には不十分です。濃い背景には明るい文字を選びましょう。また、明るい金色とアイボリーのような差の小さい2色だけで「押せる」「選択中」といった状態を示さず、文字・形・枠線も使ってください。装飾の線と、操作に必要な境界は区別して考えます。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常の文字は4.5:1以上、大きな文字は3:1以上が基準です。必要な操作部品の識別には隣接色との3:1以上が求められる場合もあります。HueRollではHEXを入力し、配色候補と選択色の白・黒に対するコントラストを確認できます。ただし任意の2色の比率やAA・AAAの合否を自動判定する機能はないため、完成画面の組み合わせは別途確認しましょう。