ネイビーとマスタードの配色例｜主役と差し色の分け方

ネイビーとマスタードは、暗い青と黄みの強い色を組み合わせる配色です。両方を同じ面積で使うより、どちらを主役にするか決めると情報を整理しやすくなります。この記事では、革小物ブランドの商品紹介ページを例に、ネイビーを広く使う場合とマスタードを主役にする場合を比べます。色名には幅があるため、ネイビーは■#1F2A44、マスタードは■#C9A227を今回の提案用の色見本とします。HEX（ヘックス）は、Webの色を6桁の英数字で表すカラーコードです。

主役は広い面積、差し色は注目してほしい場所に置く

ネイビー■#1F2A44は明るさを抑えた青なので、背景に広く使うと文字やボタンとの明暗差を作れます。マスタード■#C9A227は黄みを含む落ち着いた色ですが、ネイビーと並べると相対的に明るく見えます。差し色とは、ページ全体に広げず、購入ボタンや短い案内など、注目してほしい一部分に置く色のことです。

商品の質感や写真を静かに見せたいならネイビーを主役にし、マスタードは購入案内などに絞ります。季節限定の商品など、明るい告知を前に出したいならマスタードを主役にして、ネイビーを文字と操作部分に使う方法もあります。色の組み合わせだけで印象が決まるわけではなく、背景の面積と情報の優先順位が重要です。

革小物の紹介ページで比べる2つの配色例

例1：ネイビーを主役にする。最初に見せる商品紹介の大きな領域をネイビー■#1F2A44にし、商品名と短い説明をオフホワイト■#F8F6EEで表示します。この文字と背景のコントラスト比は約13.18:1です。コントラスト比とは、隣り合う色の明るさの差を表す数値です。

「商品を見る」ボタンだけをマスタード■#C9A227にして、ボタン内の文字はネイビー■#1F2A44にします。文字とボタンの比は約5.89:1、ボタンと周囲のネイビーの差も約5.89:1です。詳細説明に進んだら背景をオフホワイト■#F8F6EEに切り替え、本文を濃いブルーグレー■#334155（約9.57:1）にします。ネイビーで商品紹介のまとまりを作り、マスタードの面積を小さくして購入先を示す構成です。

例2：マスタードを主役にする。限定商品の告知部分をマスタード■#C9A227の背景にし、見出しや販売期間の文字をネイビー■#1F2A44で表示します。両色のコントラスト比は約5.89:1で、通常サイズの文字にも使える組み合わせです。

この案では「詳しく見る」ボタンの背景をネイビー■#1F2A44、文字をオフホワイト■#F8F6EEにします。ボタン内の文字は約13.18:1、ボタンとマスタードの背景は約5.89:1です。下の価格・仕様欄はオフホワイト■#F8F6EEに戻し、濃いブルーグレー■#334155の文字で読み進められるようにします。明るい色を主役にしたときは、暗い色を文字とボタンに回すのがポイントです。

マスタードの白文字と淡い背景には注意する

マスタード■#C9A227に白■#FFFFFFの文字を置くと、コントラスト比は約2.42:1です。Webの読みやすさに関する指針WCAG 2.2のレベルAAでは、通常の文字に4.5:1以上、大きな文字に3:1以上が求められるため、この組み合わせは避けましょう。今回のマスタードにはネイビー■#1F2A44の文字を組み合わせます。

マスタード■#C9A227とオフホワイト■#F8F6EEの比も約2.24:1で、淡い背景に置いたマスタードのボタンは輪郭が弱くなることがあります。操作部品の存在を示す境界線など、重要な文字以外の情報には、隣接色と3:1以上のコントラストが必要な場合があります。背景をネイビーにするか、濃い枠線や文字で操作できることを明確にします。

同じ色名でもコードを変えるとコントラスト比が変わります。HueRollではHEXコードを入力して色を確認でき、選んだ色と白・黒のコントラスト比を表示できます。ただし任意の2色同士の比較やAAの自動判定はできないため、実際の背景・文字・ボタンの組み合わせを別途確認してください。