珊瑚色と青磁色は合う？和色2色で作るバナーの配色

珊瑚色と青磁色は、組み合わせて使える和色です。珊瑚色の淡い赤みと青磁色の落ち着いた青緑を対比させると、やわらかな変化を作れます。ただし、2色は明るさが近いため、重ねて文字を載せたり境界を色の違いだけで見せたりするのには注意が必要です。この記事では「春の茶器市」の告知バナーを例に、背景の主役を入れ替える2案と、見出し・案内・ボタンを読みやすくする色の組み合わせを紹介します。

珊瑚色と青磁色は合う？色みの違いと明るさを分けて考える

珊瑚色（さんごいろ）は珊瑚を思わせる淡い赤系の色で、今回の見本には■#F5B1AAを使います。青磁色（せいじいろ）は青磁器の釉薬（ゆうやく）に見られる青緑色に由来する色名で、見本は■#7EBEA5です。いずれも色名だけで数値が一つに決まるわけではなく、ここではこの2つをWeb制作の比較用として採用します。HEX（ヘックス）は色を6桁の英数字で指定するコードです。

RGB（アールジービー）は赤・緑・青の光の成分を0～255で表す形式です。珊瑚色■#F5B1AAは赤245・緑177・青170で、赤みが中心です。青磁色■#7EBEA5は赤126・緑190・青165で、緑と青を比較的多く含みます。色みが違うので隣に置くと区別できますが、2色間のコントラスト比は約1.20:1です。コントラスト比は隣り合う色の明るさの差を表す数値で、色みが違っても明るさの差が十分とは限りません。

そのため、どちらか一方を広い背景にし、もう一方は開催日など小さな情報面に使う方法がおすすめです。見出しや説明には濃い緑■#254239を共通して使うと、珊瑚色■#F5B1AAとの比は約6.13:1、青磁色■#7EBEA5との比は約5.11:1になります。

春の茶器市バナーで背景と差し色を入れ替える2つの案

案1：青磁色を背景にして、珊瑚色で開催日を強調する。青磁の器を紹介する「春の茶器市」のバナー背景を青磁色■#7EBEA5にし、見出しと説明を濃い緑■#254239で載せます。文字と背景の比は約5.11:1です。「週末開催」の案内を珊瑚色■#F5B1AAの小さな帯にまとめ、帯の文字は濃い緑■#254239で約6.13:1を確保します。

珊瑚色と外側の青磁色の差は約1.20:1なので、この帯が独立した重要な情報なら濃い緑■#254239で2px程度の枠を付けます。枠と外側の青磁色は約5.11:1、内側の珊瑚色とは約6.13:1です。「出店案内を見る」ボタンは青磁色の上に濃い緑■#254239で置き、文字をオフホワイト■#FAF8F2にすると約10.31:1です。ボタンと周囲の青磁色の差も約5.11:1になります。

案2：珊瑚色を背景にして、青磁色で会場情報をまとめる。同じ茶器市のバナー背景を珊瑚色■#F5B1AAに替え、見出しを濃い緑■#254239にすると約6.13:1です。「場所・開催時間」を青磁色■#7EBEA5の情報カードにまとめ、文字は濃い緑■#254239で約5.11:1にします。カードには同じ濃い緑の枠を付けると、内側の青磁色と約5.11:1、外側の珊瑚色と約6.13:1の差ができます。

詳しい作品紹介は、バナーの下でオフホワイト■#FAF8F2の背景に切り替え、文字を濃い緑■#254239にすると約10.31:1です。珊瑚色を広い面に使い、青磁色は日時・場所を整理するための小さな面に限定する構成です。

白文字と淡い色同士の境界をチェックする

珊瑚色■#F5B1AAと白■#FFFFFFのコントラスト比は約1.79:1、青磁色■#7EBEA5と白は約2.14:1です。どちらも白い見出しや小さな文字を直接載せる組み合わせには向きません。また、オフホワイト■#FAF8F2との比も珊瑚色が約1.68:1、青磁色が約2.02:1なので、淡い背景同士でカードを区切るときは必要に応じて濃い枠や余白を補いましょう。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上を求めています。操作に必要な部品の境界など、文字以外の重要な表示も隣接色との3:1以上が必要な場合があります。開催情報や予約状況は色だけに任せず、言葉でも明記してください。HueRollではHEXを入力して色を調整し、選んだ色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。実際の組み合わせは別途確認しましょう。