青磁色とグレーはどう合わせる？明るさを変えた配色例

青磁色（せいじいろ）は、灰みを含むやわらかな青緑色です。グレーと組み合わせるときは、色の種類よりも、どのくらい明るいグレーを使うかが重要です。淡いグレーを背景にする場合と、濃いグレーを背景にする場合を比べ、見出し・本文・ボタンの色を具体的に決めていきましょう。

青磁色はグレーの明るさによって見え方が変わる

青磁色は、青緑色の釉薬（ゆうやく）を掛けた青磁器にちなんだ色名です。Webの色見本の一例として■#7EBEA5を使います。伝統色の名前に唯一のカラーコードが決まっているわけではありません。HEX（ヘックス）カラーコードは、色を「#」に続く英数字で表す形式で、この記事では6桁のコードを使います。

明度とは色の明るさの程度です。青磁色■#7EBEA5と淡いグレー■#F3F5F4はどちらも比較的明るく、並べたときのコントラスト比は約1.96:1です。色みの違いはありますが、細い境界線や小さな文字には弱い組み合わせです。濃いグレー■#303B40と青磁色■#7EBEA5なら約5.37:1となり、青緑の面がはっきり分かれます。まず背景のグレーの明るさを決め、青磁色をどこに置くか考えると整理しやすくなります。

明るいグレーと濃いグレーの配色例

例1：陶器の商品一覧は淡いグレーを広く使う

商品写真を見せるページでは、全体の背景を淡いグレー■#F3F5F4、商品カードを白■#FFFFFFにします。見出し・価格・説明文は濃いグレー■#26353Aに統一し、青磁色■#7EBEA5は特集見出しの下の短い飾り線や、写真の横に添える小さな面に使います。「商品を見る」ボタンは濃いグレー■#303B40で塗り、文字を白■#FFFFFFにします。淡い配色の中でも購入につながる操作を見つけやすくするためです。

白■#FFFFFFのカードと淡いグレー■#F3F5F4の背景だけでは明るさの差が小さいため、境界が必要なカードにはグレー■#6E7E78の枠を添える方法もあります。枠を増やしすぎず、カードの余白も十分に確保します。

例2：陶芸展の告知は濃いグレーで青磁色を引き立てる

展示会の告知バナーでは、濃いグレー■#303B40を大きな背景にし、作品展の名前は白■#FFFFFF、会期と会場は淡いグレー■#F3F5F4で載せます。青磁色■#7EBEA5は「来場予約」ボタンの背景に使い、ボタンの文字には濃いグレー■#26353Aを合わせます。周囲が暗いため青磁色を広げすぎなくてもボタンが区別でき、見出しは白で主役として残せます。

文字と枠は隣り合う色でコントラストを確認する

コントラスト比は、隣り合う色の明るさの差を表す数値です。Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が求められます。濃いグレー■#26353Aと白■#FFFFFFは約12.71:1、淡いグレー■#F3F5F4と濃いグレー■#303B40は約10.51:1で、通常文字の基準を満たします。

青磁色■#7EBEA5のボタンに濃いグレー■#26353Aの文字を載せた場合も約5.93:1で基準を満たします。しかし白■#FFFFFFの文字では約2.14:1しかなく、大きな文字の基準にも届きません。青磁色なら白文字が合うと決めつけず、背景と一緒に選んでください。

操作に必要な枠やアイコンなど、意味のある文字以外の要素は、隣接する色との比が原則3:1以上必要です。例1で使った枠のグレー■#6E7E78は淡い背景■#F3F5F4と約3.90:1、白いカード■#FFFFFFと約4.27:1です。一方、青磁色■#7EBEA5と淡い背景■#F3F5F4は約1.96:1なので、青磁色の細い線を操作の手がかりにするのは避けます。純粋な飾り線なら意味のある枠とは分けて考えましょう。HueRollでは選択色と白・黒のコントラストを確認できますが、今回のような任意の2色は別途計算して確認します。