モーヴピンクをWebに使う配色｜背景と差し色の決め方

モーヴピンクをWebサイトで使うなら、最初に「広い背景に敷く色なのか、目を向けてほしい部分の差し色なのか」を決めましょう。くすんだ紫みのピンクは落ち着いた配色を作る候補ですが、文字まで似た色にすると読みにくくなることがあります。ここでは写真家のポートフォリオサイトを例に、モーヴピンクをメイン背景にする案と、明るい背景に差し色として使う案を比較します。

モーヴピンクは背景と差し色のどちらに使う？

モーヴピンクは、灰色がかった紫みを含むピンク系の色を指します。「モーブピンク」と書くこともあります。色名に固定のカラーコードはなく、今回は資料の掲載例から■#B89BAEを基準色にします。別の色見本では■#C77398も「Mauve Pink」とされています。2色のコントラスト比は約1.32:1で、同じ名前でも赤みや明るさに差があります。HEX（ヘックス）はWeb上の色を6桁の英数字で指定するコードです。制作時は色名だけでなく、採用したHEXを共有しましょう。

背景に使う場合は、モーヴピンク■#B89BAEの上の見出しと説明を濃い墨紫■#241C25にします。この組み合わせは約6.58:1です。コントラスト比とは、文字と背景など隣り合う色の明るさの差を示す数値です。差し色には深い青緑■#285A53を選ぶと、モーヴピンクとの比は約3.11:1になります。青緑はボタンなど小さな面に集め、本文の文字色を増やさないのが一つの方法です。

写真家のポートフォリオで背景と差し色を入れ替える

案1：モーヴピンクを自己紹介エリアの背景にする。トップページの「写真と日々の記録」という見出しと紹介文を、モーヴピンク■#B89BAEの背景に墨紫■#241C25で載せます。文字と背景の比は約6.58:1です。「撮影を相談する」ボタンは深い青緑■#285A53の背景に白■#FFFFFFの文字を載せ、約7.84:1を確保します。ボタンと周囲のモーヴピンク■#B89BAEは約3.11:1です。色みの違いだけでなく、明るさの差を付けて操作部分を分けます。

撮影メニューや連絡方法はオフホワイト■#FAF7F5のカードにまとめ、墨紫■#241C25で約15.53:1の文字コントラストを確保します。ただし、カードと外側のモーヴピンク■#B89BAEの比は約2.36:1です。カードの輪郭が重要なら灰みの紫■#5C4855の枠を加えます。枠と外側のモーヴピンクの比は約3.32:1、内側のオフホワイト■#FAF7F5との比は約7.83:1です。

案2：明るい背景にモーヴピンクを差し色として置く。作品写真を主役にする一覧ページでは、広い背景をオフホワイト■#FAF7F5、見出しと説明を墨紫■#241C25にします。文字と背景は約15.53:1です。作品の分類を示す「風景」「人物」などのラベルだけをモーヴピンク■#B89BAEで塗り、墨紫■#241C25の文字を載せると約6.58:1になります。

ラベルと外側のオフホワイト■#FAF7F5の比は約2.36:1なので、重要な区切りなら灰みの紫■#5C4855の枠を付け、外側とは約7.83:1、内側とは約3.32:1を確保します。「お問い合わせ」ボタンはワイン紫■#63374Eの背景に白■#FFFFFFの文字を使い約9.60:1、ボタンと周囲のオフホワイトの比は約9.00:1です。モーヴピンクは写真の周囲に少しだけ使い、ボタンはより暗い差し色で目立たせる構成です。

淡いピンクの文字と状態表示は色差だけに頼らない

モーヴピンク■#B89BAEに白■#FFFFFFの文字を載せると、比は約2.52:1です。また、オフホワイト■#FAF7F5の背景にモーヴピンク■#B89BAEの小さな文字を載せても約2.36:1なので、本文やボタン内の文字には使いません。別の色見本■#C77398でも墨紫■#241C25との比は約5.00:1ですが、配色を変えたら数値は改めて計算してください。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。操作に必要な枠や意味のある図形にも、隣接色との3:1以上が必要な場合があります。「選択中」「未選択」などはピンクの濃淡だけで示さず、文字や形も添えましょう。

HueRollではHEXを入力して色を調整し、選んだ色と白・黒のコントラスト比を確認できます。ただし、任意の2色間の比較やAA・AAAの自動判定には対応していません。背景と差し色を決めた後は、実際に隣り合う文字・ボタン・カードの色を別途確認してください。