ミューテッドダーク・パープルに合う色は？暗い紫を品よく引き立てる配色例【#441C4A】

ミューテッドダーク・パープル（■#441C4A）は、赤みを含む紫を暗く抑えた色です。Webサイトでは、見出しやナビゲーション、濃色パネルに使うと落ち着いた存在感を出しやすい一方、紫系の濃淡だけでまとめると画面全体が重く見えることがあります。ここでは、ウォームアイボリー、ストーングレー、ダスティスチールブルーを合わせ、暗い紫を品よく引き立てる配色を考えます。

暖かい明色を土台にし、青みの低彩度色で静かな変化を付ける

■#441C4Aには、背景用のウォームアイボリー■#F5F0EA、補助文字用のストーングレー■#6C625E、アクセント用のダスティスチールブルー■#8C9BADを合わせる例が考えられます。

■#F5F0EAはわずかに黄みを含む明色なので、暗い紫との明度差を大きくしながら、冷たくなりすぎない背景を作れます。■#6C625Eは彩度を抑えた暖色寄りのグレーで、本文より弱く見せたい補足文やメタ情報に向きます。■#8C9BADは青寄りの低彩度色で、紫と色相のつながりを残しながら、同系色の濃淡だけとは違う静かな変化を付けられます。

本文はアイボリー面で読み、スチールブルーは濃い紫の中で使う

実装では、本文やカードの背景を■#F5F0EAにし、見出しや主要文字へ■#441C4Aを使うと、暗い紫を主役にしながら読み進める面を明るく保てます。補足文は■#6C625Eへ分け、情報の強弱を付けます。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#441C4Aと■#F5F0EAは約12.27:1、■#6C625Eと■#F5F0EAは約5.23:1、■#441C4Aと■#8C9BADは約4.90:1です。WCAG 2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。濃い■#441C4Aの面に■#8C9BADのボタンを置く場合は、ボタンと周囲の差も約4.90:1となり、意味のあるUI部品に必要な3:1以上も確保できます。

品よく見せるなら、青みのアクセントは暗い面に限定する

■#8C9BADは、紫に近い青方向へ色相をずらしながら鮮やかさを抑えた色です。大きな面へ広げるより、濃い■#441C4Aの中に置くボタンや短いラベルなどへ絞ると、紫の落ち着きを崩さず役割を分けやすくなります。

一方、■#8C9BADと■#F5F0EAのコントラスト比は約2.50:1です。そのため、明るい背景上の通常文字には使わず、意味のあるUI部品の境界をこの2色だけで識別させる使い方も避けます。WCAG 2.2では、操作部品や意味のある図形を識別するために必要な視覚情報は隣接色と3:1以上が基準です。明るい面に操作要素を置く場合は、■#441C4Aの背景や枠線を使うなど、十分な明度差を確保してください。