青とピンクはどう合わせる？主役を変えて比べる配色例

青とピンクを組み合わせるときは、どちらを主役にするかで背景・見出し・ボタンの役割が変わります。2色を同じ面積で並べるより、一方を広い面に使い、もう一方を注目させたい場所に絞ると、情報を整理しやすくなります。青を主役にするイベント案内と、ピンクを主役にする商品特集を、同じ2色で比較します。

青とピンクは、明るさと使う面積を決めて組み合わせる

この記事では、落ち着いた青■#245B94と明るいピンク■#F6CDE0を例にします。色名だけでは数値が決まらないため、HEX（Webの色を16進数で表すカラーコード）を指定して比較します。青とピンクを両方目立たせるのではなく、背景・文字・操作する場所のどこに置くか先に決めることがポイントです。

今回の青とピンクのコントラスト比（2色の明るさの差）は約4.91:1です。青の文字をピンクの上に置く場合は通常サイズの文字に必要な4.5:1を上回りますが、細い文字や小さな表示では実際の画面でも確かめましょう。一方、白■#FFFFFFとピンクの比は約1.43:1しかありません。ピンクに白文字を重ねるのではなく、濃い青や暗いグレーを使います。

同じ2色で主役を入れ替えた配色例

青を主役にする：イベントの申込み案内

オンラインイベントの案内では、冒頭の大きな背景を青■#245B94、タイトルと説明を白■#FFFFFFにします。青と白の比は約7.00:1です。参加申込みボタンはピンク■#F6CDE0で塗り、文字に青■#245B94を使うと、ボタン内の文字にも、ボタンと周囲の青い背景にも約4.91:1の差が生まれます。

開催日時や参加方法は、青い領域の下にオフホワイト■#F7FAFCの情報欄を設け、文字を濃いグレー■#253141にします。文字と背景の比は約12.57:1です。ピンクは申込みボタンに集中させ、同じピンクの飾りをあちこちへ増やしすぎないようにすると、重要な操作を見失いにくくなります。

ピンクを主役にする：ギフト商品の特集ページ

ギフト商品の特集では、ページ上部の背景をピンク■#F6CDE0にし、見出しを青■#245B94、短い説明文を暗いグレー■#253141にします。見出しと背景は約4.91:1、本文とピンクは約9.24:1です。「商品を見る」ボタンは青■#245B94の背景に白■#FFFFFFの文字を載せ、文字との比を約7.00:1にします。

価格や配送案内は白■#FFFFFFのカードにまとめ、濃いグレー■#253141の文字を使います。文字と白の比は約13.17:1ですが、白とピンクの差は約1.43:1と小さめです。カードの境界が必要なら、濃い灰青■#59616Eの枠を使います。枠とピンクは約4.38:1、枠と白は約6.25:1となります。

主役を入れ替えても、文字と情報の優先順位は保つ

色を反転させても、文字色を機械的に入れ替える必要はありません。青い面には白文字、ピンクの面には暗い文字というように、背景ごとに確認します。写真を入れる場合は画像の色によって見え方が変わるため、文字やボタンを単色の領域に置くと調整しやすくなります。また、申込みや購入の意味は色だけでなくボタンの文言でも示してください。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字には4.5:1以上、大きな文字には3:1以上のコントラスト比が必要です。操作部品の識別に必要な見た目の情報にも、隣接する色との3:1以上が求められる場合があります。HueRollではHEX入力から配色候補を探し、選択色と白・黒とのコントラストを確認できますが、任意の2色間の比較やAA・AAAの自動判定はできません。最終的な組み合わせは別途検証しましょう。