シェルピンクの背景には何色の文字？やさしい配色の整え方

シェルピンクは、貝殻の内側を思わせる淡いピンク系の色です。Webページの背景に使うと、やわらかな雰囲気を作れます。一方で、白や薄いグレーの文字を重ねると、文字が背景に溶け込んでしまうこともあります。この記事では、文字色の候補をコントラスト比で比較し、案内カードや小さなバナーに使える配色の整え方を紹介します。

シェルピンクの背景には濃い文字色を合わせる

シェルピンクは資料によって色の表し方が異なるため、決まったHEXコードが一つだけあるわけではありません。HEXは、Web上の色を「#」と6桁の英数字で指定する方法です。ここでは、少し黄みを含んだシェルピンクの例として■#FCE2D5を背景色にします。

文字色を決める際は、ピンクと色みをそろえることよりも、背景との明るさの差を確保することが大切です。候補を同じ背景上で比較すると、次のようになります。

表の比率は、例示した背景色と各文字色から計算した値です。WCAG（Webコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常の文字に4.5:1以上、大きな文字（約24px以上、または約19px以上の太字）に3:1以上のコントラスト比が求められます。濃いグレーや茶系なら、やさしい色合わせのまま通常サイズの文字にも使える差を確保できます。白は背景との明るさの差が小さく、本文には向きません。

案内カードでは背景・文字・ボタンの役割を分ける

例えば、お知らせカードの背景を■#FCE2D5、見出しを深いココアの■#5A423F、本文をチャコールの■#353235、日付や補足を落ち着いたローズブラウンの■#77565Bにすると、文字の役割を分けながら色のまとまりを保てます。見出しだけ少し赤みを含ませると、ピンクの背景となじみつつ本文との差も作れます。

申込みボタンを添えるなら、背景を濃いローズ系の■#6D4954、ボタン内の文字を白の■#FFFFFFにする方法があります。この2色のコントラスト比は7.69:1です。カード背景のシェルピンク■#FCE2D5とボタン色の差も6.22:1あり、淡いカードの中で操作する場所を区別できます。

全体を淡く見せたいからと文字まで薄くすると、情報の優先順位が伝わりません。色数を増やすより、背景は淡く、文章は濃く、ボタンははっきりした面として整理するのがポイントです。

やさしさを残して読みやすく調整するポイント

最初に本文の文字色を決め、その後で見出しや補足の色を調整しましょう。補足文字を小さくする場合も、濃さを削りすぎないことが大切です。細い文字は計算上の基準に達していても弱く見える場合があるため、スマートフォンでも確かめてください。

カードを白いページに置く場合、シェルピンクと白は近い明るさなので、境界が分かりにくければ余白や輪郭線を加えます。リンクは色の違いだけに頼らず、下線なども使うと操作できる場所が伝わりやすくなります。

HueRollでは候補色のHEXを確認し、選択色と白・黒のコントラストを比べられます。ただし任意の2色間の比較やWCAGの自動判定はできません。実際に重ねる文字色と背景色の比率は、別途2色を比較できる方法で確認しましょう。