シェルピンクとブラウンの配色｜背景と文字色を決めるヒント

シェルピンクとブラウンを合わせると、淡い色のやわらかさと濃い色の落ち着きを両立させた配色を考えられます。ただし、背景と文字の役割を決めずに使うと、淡い面の境界がぼやけたり、ボタンが埋もれたりすることがあります。この記事では、ギフトラッピングを紹介するWebページを例に、シェルピンクを広く使う案とブラウンを広く使う案を比べます。

シェルピンクとブラウンは明るさの差で役割を分ける

今回の色見本は、シェルピンク■#FDDDCDと深いブラウン■#53392Fです。シェルピンクは貝殻の内側を思わせる淡いピンク系の色ですが、色名に対応するコードは資料によって異なります。ここでは配色を試すための一例として使います。HEX（ヘックス）は、Web上の色を「#」と6桁の英数字で表すカラーコードです。

シェルピンク■#FDDDCDを背景にすると、色そのものが広い面積を占めます。そのため、文字は濃いブラウン■#53392Fにして、文章と背景の明るさの差を作ります。ブラウンの文字は真っ黒よりも色みを感じさせながら、淡い背景を引き締める選択肢です。

反対に、ブラウン■#53392Fを背景として広く使うときは、シェルピンク■#FDDDCDを見出しやボタンの面に回す方法があります。二つの色を同じ面積で使う必要はなく、ページで何を主役にするかに合わせて配分を変えましょう。

ギフトラッピングの紹介ページで背景を入れ替える

案A：シェルピンクの背景で商品写真を囲む

やわらかな雰囲気を優先する場合は、最初の紹介エリアをシェルピンク■#FDDDCDにし、「選べるラッピング」という見出しと説明文をブラウン■#53392Fで表示します。包装例を並べるカードにはアイボリー■#FFF9F4を使い、写真の周囲に余白を確保します。

「包装の種類を見る」ボタンは、ブラウン■#53392Fの背景に白■#FFFFFFの文字を合わせます。淡い画面の中で操作部分を暗くする構成です。カードと背景の色の差は小さいため、カードの境界を明示したい場合は、グレイッシュなブラウン■#8C7169の枠線を付け、余白も確保します。

案B：ブラウンの背景にシェルピンクを添える

ラッピングの素材感や写真の明るさを強調したい場合は、冒頭の帯をブラウン■#53392Fに変更します。大きな見出しはシェルピンク■#FDDDCD、説明文はアイボリー■#FFF9F4にし、濃い背景でも文字を区別します。

この案の「包装の種類を見る」ボタンは、シェルピンク■#FDDDCDの背景とブラウン■#53392Fの文字に入れ替えます。下の詳しい説明エリアではアイボリー■#FFF9F4の背景に戻し、本文をブラウン■#53392Fにすると、濃い面が続きすぎません。どちらの案も、ボタンの文言と役割は統一します。

文字のコントラストと淡い面の境界を確認する

コントラスト比は、文字と背景など隣り合う色の相対的な明るさの差です。ブラウン■#53392Fとシェルピンク■#FDDDCDの比は約8.22:1、ブラウン■#53392Fとアイボリー■#FFF9F4は約10.08:1です。ブラウン背景の白文字■#FFFFFFも約10.53:1となります。いずれも、WCAG 2.2のレベルAAで通常サイズの文字に求める4.5:1以上です。

一方、白文字■#FFFFFFとシェルピンク■#FDDDCDの組み合わせは約1.28:1しかありません。ピンクのボタンに白文字を重ねるのではなく、濃いブラウンの文字を選びます。

シェルピンク■#FDDDCDとアイボリー■#FFF9F4の面同士の比は約1.23:1です。境界そのものがカードの識別に必要なら、グレイッシュなブラウン■#8C7169の枠線を加える方法があります。この枠線とシェルピンク■#FDDDCDは約3.50:1、アイボリー■#FFF9F4とは約4.30:1です。意味のあるUI（操作する画面部品）の視覚的な境界には、隣接色と3:1以上のコントラストが求められる場合があります。

実際のページでは、写真の色、文字の大きさ、ボタンの位置も合わせて確認しましょう。シェルピンクを広く使えば軽さを、ブラウンを広く使えば締まった印象を出しやすくなりますが、どちらも背景・文字・操作部分を分けて考えることが大切です。