ピンクを基調にしたWEBサイトの配色｜甘くなりすぎない色合わせ
ピンクを基調にしたWEBサイトは、淡い色を広く使うとやわらかな雰囲気を作れます。一方、背景・文字・ボタンまで明るいピンクで統一すると、情報の強弱がなくなり、用途によっては甘い印象に偏ることがあります。ポイントはピンクを避けることではなく、使う面積と役割を絞り、濃い文字色や落ち着いたニュートラルカラーを組み合わせることです。ここでは淡いピンク#F3DEE5を基準に、具体的な配色を考えます。HEXはWEBの色を16進数で表すコードです。
ピンクを主役にしながら、甘さを抑える組み立て方
まず、ピンクを「サイトの雰囲気を示す面」として使うのか、「注目させたい部分」に使うのかを分けます。ページ冒頭の背景に淡いピンクを置いたなら、本文や事例一覧は白や薄いグレーなどの中立的な色へ切り替える方法があります。全ての見出しやカードに別々のピンクを足す必要はありません。
ピンクを基調色にしても、本文の文字色までピンク系にする必要はありません。明るい背景には濃い文字色を決め、見出しはその文字色に近い深い赤紫などで区別します。また、ピンクは写真の色との関係でも見え方が変わるため、商品の写真や人物写真が主役の場所では、彩度（色の鮮やかさ）の低い背景を選ぶと整理しやすくなります。
「甘すぎる」と感じたときは、無理に反対色を足す前に、ピンクが続く面積を減らし、文字とボタンの明度（色の明るさ）に差を付けてみましょう。印象の調整と、情報を読み取れることは別々に確認するのが大切です。
インテリア相談サイトに使う具体的な配色例
部屋の施工事例を写真で紹介し、相談予約につなげるWEBサイトを想定します。淡いピンクは最初の案内、濃い色は文章と操作、白やグレーは事例を見せる場所に割り当てます。
- ページ上部の背景：くすんだ淡いピンク#F3DEE5を使い、見出しには濃いプラム#6C3C50を合わせます。文字とのコントラスト比は約6.83:1です。背景の面積を上部にまとめ、長い本文には使い続けない構成にします。
- 本文の背景と文字：温かみのあるオフホワイト#FAF8F5にチャコール#2D3038を合わせます。コントラスト比は約12.45:1で、サービスの説明や料金を載せる部分に使います。
- 施工事例のカード：白#FFFFFFの面にチャコール#2D3038で事例名と説明を表示します。文字と背景は約13.20:1です。ただし、白#FFFFFFと周囲のオフホワイト#FAF8F5の差は約1.06:1と小さいため、余白と境界線でカードを区切ります。
- 事例カードや入力欄の線：落ち着いたグレイッシュローズ#7F737Bを使います。白#FFFFFFに対して約4.53:1、オフホワイト#FAF8F5に対して約4.27:1で、入力部分の輪郭を区別できます。
- サービスの流れを示す案内面：淡いウォームグレー#E7E4E0を使い、チャコール#2D3038で説明します。文字と背景は約10.41:1です。境界線のグレイッシュローズ#7F737Bとも約3.57:1の差があります。
- 「相談を予約する」ボタン：濃いローズ#7D3C55の背景に白#FFFFFFの文字を置きます。文字とボタンは約7.93:1、ボタンと淡いピンク#F3DEE5の周囲は約6.19:1です。
この例ではピンク系を広い背景と主要な操作に集中させ、写真を並べる場所には白とグレーを使います。ピンクを何色も追加するより、「背景」「文字」「予約」という役割を固定すると全体がまとまりやすくなります。
文字の読みやすさと細部を確認する
WCAG（WEBコンテンツのアクセシビリティに関するガイドライン）2.2のレベルAAでは、通常サイズの文字と背景のコントラスト比は4.5:1以上、大きな文字では3:1以上が基準です。入力欄の輪郭など、操作に必要な視覚情報については隣接する色との3:1以上が求められます。上の数値は、記載した色同士で計算しています。
淡いピンク#F3DEE5とオフホワイト#FAF8F5の背景同士の差は約1.21:1です。セクションの切替を背景色だけで伝えず、余白や見出しでも構造を示します。また、やわらかなローズ#C88FA4は白#FFFFFFの上で約2.65:1なので、意味を伝える小さなアイコンや入力欄の輪郭には使わず、装飾的な線などに限定するのが安全です。
最後にスマートフォンで、写真に重なる文字、事例カードの境界、相談ボタンの位置を確認します。HueRollでは選択色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。背景と文字、ボタンと周囲のように色を組み合わせる場合は、それぞれ別途計算してください。