グレージュとくすみピンクに合う差し色｜淡い配色を引き締める

グレージュとくすみピンクは、どちらも鮮やかさを抑えた柔らかな色です。ただ、背景も見出しも淡い色でまとめると、案内ボタンや重要な情報まで目立たなくなることがあります。そんなときは色数を増やすより、濃い差し色を一つ選んで使う場所を絞ると整理しやすくなります。この記事では、ネイビーとブラウンの選び方を、Webの商品紹介ページを例に考えます。

差し色は濃いネイビーかブラウンから選ぶ

今回の配色では、グレージュを■#E5DCD6、くすみピンクを■#DEC4CCとします。グレージュはグレーとベージュの中間のような色、くすみピンクは彩度（色の鮮やかさ）を抑えたピンクです。どちらも色名に共通の正式なHEXコードがあるわけではありません。HEXは、Webの色を「#」と6桁の英数字で示す指定方法です。

引き締めたいときの第一候補は、深いネイビー■#283D57です。青系の色みがピンクの赤みと異なるため、差し色として独立して見せやすく、購入ボタンや重要なリンクに使えます。一方、温かい雰囲気を優先するなら、ココアブラウン■#664538が候補です。グレージュの黄みとつながりやすく、落ち着いた印象を保ちながら濃さを加えられます。

同じページに両方の濃色を主役として使うと、視線が分散する場合があります。まずはネイビーかココアブラウンのどちらかを主要な差し色に決め、もう一方は使わずに試しましょう。

雑貨ショップの商品紹介ページに配色を割り当てる

例えば、手作り雑貨の新商品を紹介するページでは、グレージュを広い面積に、くすみピンクを見出し周辺の一部に使い、濃い差し色を操作部分に置きます。具体的な役割は次のとおりです。

• ページ背景：グレージュ■#E5DCD6。商品写真の周囲を落ち着いた明るさにします。
• 「新着商品」の見出し帯：くすみピンク■#DEC4CC。短い帯として使い、背景全体をピンクにしません。
• 商品カード：オフホワイト■#FBF8F6。写真・商品名・価格を一つのまとまりにします。
• 商品名・説明文：濃いチャコール■#3B3440。グレージュ、くすみピンク、オフホワイトの上で共通の文字色にします。
• 「商品を見る」ボタン：深いネイビー■#283D57を背景に、白■#FFFFFFの文字を合わせます。

商品カードを横に並べる場合は、カードの間に余白を置き、くすみピンクの帯とボタンを離して配置します。こうすると、淡い色は情報のまとまりを作り、濃い色は操作を知らせる役割になります。温かさを強めたい場合は、ボタンのネイビーをココアブラウン■#664538に差し替えて比較してください。両方を同時に使う必要はありません。

淡い2色の境界と文字のコントラストを確かめる

グレージュ■#E5DCD6とくすみピンク■#DEC4CCのコントラスト比は約1.21:1です。コントラスト比は隣り合う色の明るさの差を示す数値で、この2色だけでは境界が分かりにくい場合があります。選択できるカードなど、境界が操作の理解に必要なら、余白に加えて枠線を使いましょう。例えば枠線の■#7D626Bは、グレージュとの比が約4.06:1、くすみピンクとの比が約3.36:1です。

文字については、濃いチャコール■#3B3440とグレージュ■#E5DCD6が約8.87:1、くすみピンク■#DEC4CCが約7.35:1、オフホワイト■#FBF8F6が約11.34:1です。ネイビーのボタン■#283D57と白文字■#FFFFFFは約11.08:1、代案のココアブラウン■#664538と白文字■#FFFFFFは約8.49:1です。いずれもWCAG 2.2のAAで通常の文字に求められる4.5:1以上です。

ただし、写真の上に文字を重ねたり、背景に半透明の色を使ったりすると、実際の比率は変わります。完成画面で隣接する色を確認し、差し色はボタンなど注目させたい部分に集中させると、淡い配色を保ったまま重要な場所を見つけやすくできます。