青磁色の配色アイデア｜背景・文字・差し色の合わせ方

青磁色（せいじいろ）をWebサイトに取り入れたいとき、背景に広く使うか、見出しや小さな差し色に使うかで、組み合わせは変わります。青磁色の穏やかな雰囲気を残しながら、文字やボタンを埋もれさせない配色を、実際のカラーコードとともに考えます。

青磁色は「広く使う色」と「引き締める色」を分ける

青磁色は、青磁という焼き物を思わせる、灰みを含んだ淡い青緑色です。色名に厳密な一つの数値が決まっているわけではありません。ここでは代表的な例として■#7EBEA5を使います。HEX（16進数でWebの色を表すコード）は、同じ色をデザインデータやCSS（Webページの見た目を指定するスタイルの仕組み）で指定するときの目印になります。

まず青磁色を「背景」「補助面」「装飾」のどこに置くか決め、その次に濃い文字色を選ぶと整理しやすくなります。淡い青緑の上へ白文字を置くと、柔らかさは出ても明るさの差が足りません。実際、■#7EBEA5と白■#FFFFFFのコントラスト比は約2.14:1で、通常の文章向けの基準には届きません。濃い青緑やチャコール系を文字に選び、強く見せたい場所だけ別の濃色を使います。

背景・文字・差し色の具体的な組み合わせ

情報を落ち着いて見せたいサービスサイト

ページ全体の背景を温かみのあるオフホワイト■#F7F8F3、本文と見出しを深い青緑■#233B35にします。青磁色■#7EBEA5は、サービスの特長や案内事項を載せる横長の面に使います。白に近い背景が余白を作り、青磁色の面を必要な場所だけ目立たせる配置です。

本文とオフホワイトの比は約11.25:1、同じ濃い文字と青磁色の面でも約5.60:1です。申し込みボタンには濃い緑■#286452を使い、文字を白■#FFFFFFにすれば約6.92:1になります。ボタンと周囲のオフホワイトの差も約6.48:1あるため、文字の読み取りと操作部分の見分けやすさを別々に確保できます。

青磁色を主役にするイベント告知バナー

青磁色■#7EBEA5をバナーの広い背景にし、タイトルを深い青緑■#233B35にします。開催日や会場の詳細はアイボリー■#F8F5EEの小さな情報カードにまとめ、カード内も同じ濃い文字を使うと、主役の色を隠さずに情報を分けられます。タイトルと青磁色の比は約5.60:1、カード内の文字とアイボリーの比は約11.03:1です。

差し色は、青緑と色みが異なる赤みのあるテラコッタ■#A85042を申込みボタンに限定します。白■#FFFFFFのボタン文字との比は約5.40:1です。ボタンはアイボリーのカード内に配置し、カードの色との比も約4.96:1を確保します。青磁色の面の上へ直接ボタンを置く場合は、周囲との差を改めて確認してください。

ぼやけを防ぐ調整と確認のポイント

青磁色を大きく使いすぎて画面が単調なら、背景を明るい無彩色に戻し、青磁色を見出しの帯や案内面へ絞ってみましょう。反対に、差し色の赤みが強く見える場合は、ボタンや重要な印だけに面積を限定します。細い区切り線を青磁色だけで表すと、周囲の淡い背景に埋もれる場合があるため、余白や見出し、必要に応じて濃い境界線も併用します。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAA（適合基準の一段階）では、通常サイズの文字と背景のコントラスト比は4.5:1以上、大きな文字は3:1以上が基準です。色を使った結果だけで操作状態や情報の意味を伝えず、ラベルや形も添えます。HueRollでは青磁色などのHEX入力から配色候補を探し、選択色と白・黒の比率を確認できます。ただし任意の2色間の比率やAA・AAAの合否は自動判定しないため、完成画面の組み合わせは別途検証しましょう。