スモーキーブルーとモーブは合う？くすみカラー同士の色合わせ

スモーキーブルーとモーブは、一緒に使える色の組み合わせです。スモーキーブルーは灰色がかった青、モーブは灰色を含む赤紫系の色として扱われ、鮮やかさを抑えた配色を作れます。ただし、2色を同じ面積で並べるだけでは、境界や文字がぼやけることもあります。ここではWebの作品紹介カードと告知バナーを例に、色の役割と調整方法を比較します。

くすみ具合をそろえ、明るさと面積で違いをつける

彩度とは、色の鮮やかさの度合いです。スモーキーブルーとモーブは、彩度を抑えると互いに強く競いにくく、青と赤紫の色みの違いを穏やかに見せられます。一方、明るさまで近づけると、2色を隣り合わせにしたときの境界が弱くなりがちです。

今回の例では、スモーキーブルー■#8198A6とモーブ■#B29AAAを使います。これらは配色を試すために選んだHEX（Webで色を指定する16進数のカラーコード）の例で、色名ごとに決まった唯一の数値ではありません。2色のコントラスト比は約1.16：1で、明るさの差は小さめです。コントラスト比は隣り合う色の相対的な明るさの違いを示す数値です。

2色を同じ広さの背景にせず、一方を広い面、もう一方を小さなラベルや装飾に割り当てると、見せたい情報の優先順位を作りやすくなります。

作品紹介カードと告知バナーで配色を比較する

例A：落ち着いた作品紹介カード。ページ全体には温かみの少ないオフホワイト■#F7F4F1を使い、カードの見出し部分をスモーキーブルー■#8198A6にします。本文と見出しの文字は濃いチャコール■#212832で統一します。モーブ■#B29AAAは作品の分類を示す「イラスト」などの小さなラベル背景に使い、文字は同じチャコール■#212832にします。青の見出し面とモーブのラベルの間にはオフホワイトの余白を取り、2色が直接接して境界があいまいになるのを避けます。

この組み合わせでは、チャコール■#212832とスモーキーブルー■#8198A6の文字コントラスト比は約4.93：1、チャコール■#212832とモーブ■#B29AAAは約5.72：1、チャコール■#212832とオフホワイト■#F7F4F1は約13.55：1です。

例B：ワークショップの告知バナー。広い背景を淡いモーブ■#E9DFE6にして、イベント名と日時をチャコール■#212832で表示します。スモーキーブルー■#8198A6は短い飾り線にとどめ、「参加を申し込む」ボタンは濃い青灰色■#496579、ボタン文字は白■#FFFFFFにします。淡い背景の中で操作場所を見つけやすくするため、ボタンだけ明るさを大きく変えた構成です。淡いモーブ■#E9DFE6とチャコール■#212832の比は約11.43：1、ボタンの濃い青灰色■#496579と白■#FFFFFFは約6.14：1です。

淡い2色の境界と小さな文字を確認する

今回のスモーキーブルー■#8198A6に白■#FFFFFFの通常サイズの文字を載せると、コントラスト比は約3.01：1です。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字は原則4.5：1以上、大きな文字は3：1以上が基準です。そのため、この青の上に小さな白文字を置くのは避け、例Aのように濃い文字を選びます。

また、2色の背景の区切り自体が操作や情報の識別に必要なら、余白だけに頼らず、十分に区別できる枠線や形の違いも加えます。スマートフォン幅に縮め、ラベルが読めるか、ボタンが周囲に埋もれないかを確かめてください。

HueRollではHEXを入力して色を調整し、選択色と白・黒のコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動合否判定には対応していません。この記事で示した2色間や文字・背景間の比率は別途計算したものです。