パールホワイトを画面で表すには？色と光沢の違いを考える

パールホワイトを画面で表すときは、「白に近い色」と「真珠らしい光沢」を分けて考えることが大切です。明るいHEXカラーを指定すれば色の見本は作れますが、真珠の表面で起こる複雑な光の反射までは表現できません。Web制作では、単色で清潔感のある背景を作る方法と、淡いグラデーションで光沢を連想させる方法を使い分けられます。この記事では真珠アクセサリーの展示会を案内するページを例に、それぞれの役割と文字の読みやすさを比べます。

パールホワイトの色コードと、実物の光沢は別のもの

色見本資料の一例では、パールホワイトはわずかに灰色みのある白■#F7F6F5です。別の資料では、黄みを含む白■#FFFEF2が掲載されています。この2色のコントラスト比は約1.06:1で、どちらも白に近い見本です。色名に共通のHEX値が一つあるわけではありません。HEX（ヘックス）は、画面で使う色を6桁の英数字で指定するコードです。制作時は「パールホワイト」という名前だけでなく、採用するコードを共有しましょう。

一方、実物の真珠のような光沢は、光の反射や干渉が重なることで生まれます。真珠光沢顔料でも、層状の粒子による反射・干渉が利用されます。表示する色が同じでも、光の当たり方や見る角度で変わる質感を、固定された1つのHEX値に入れることはできません。Web上のグラデーションも、その質感を連想させる静止した演出であり、実物の真珠光沢を忠実に再現するものではありません。

基準のパールホワイト■#F7F6F5と純白■#FFFFFFの差は約1.08:1です。並べただけでは境界が目立ちにくいので、文字には濃いチャコール■#29313Bを合わせます。この文字色とパールホワイトのコントラスト比は約12.18:1です。コントラスト比とは、隣り合う色の明るさの差を数値で表したものです。

単色とグラデーションを展示案内ページで比べる

案1：単色のパールホワイトを背景にする。「真珠アクセサリー展示会」の見出しと案内文をパールホワイト■#F7F6F5の背景にチャコール■#29313Bで載せます。文字との比は約12.18:1です。「来場予約をする」ボタンは深い青灰色■#315A6Dに白■#FFFFFFの文字を載せると約7.46:1、ボタンと外側のパールホワイトの差は約6.91:1になります。背景が控えめでも、操作する場所は明暗差で分けられます。

展示時間や会場名を純白■#FFFFFFのカードにまとめた場合、カードとパールホワイト■#F7F6F5の比は約1.08:1です。輪郭が必要なら青みのある灰色■#64717Bで枠を付けます。この枠は外側のパールホワイトと約4.64:1、内側の白とは約5.01:1です。カードの中の文字はチャコール■#29313Bにすると、白との比は約13.15:1になります。

案2：装飾部分だけで光沢風の変化を付ける。同じ展示会のページで、見出しの下の細長い飾り帯を、暖色の陰影■#E7DFE2・基準の白■#F7F6F5・明るい白■#FFFFFF・青みの陰影■#DEE5E8がゆるやかにつながるグラデーションにします。CSS（シーエスエス）はWebページの見た目を指定する仕組みで、linear-gradient()は複数の色を直線方向につなぐ表現です。下の見本は実物の光沢ではなく、静止した装飾例です。

飾り帯には重要な文字や予約ボタンを重ねず、見出しは単色のパールホワイト■#F7F6F5の面に、本文は白■#FFFFFFの面に置きます。チャコール■#29313Bの文字なら、前者で約12.18:1、後者で約13.15:1です。光沢らしい変化を見せる場所と、読ませる場所を分ける構成です。

白文字・淡い境界・光沢の見せすぎに注意する

パールホワイト■#F7F6F5に白■#FFFFFFの文字を置くと約1.08:1で、十分な差がありません。グラデーションの明るい部分も同様です。さらに、白■#FFFFFFと青みの陰影■#DEE5E8の比は約1.27:1、白と暖色の陰影■#E7DFE2は約1.31:1なので、陰影そのものを重要なカードの境界として使うのは避けます。線・ボタン・状態を示す部分には、役割に応じて十分な明暗差を付けましょう。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上のコントラスト比を求めています。操作に必要な枠など、文字以外の重要な表示にも隣接色との3:1以上が必要な場合があります。光沢風のグラデーションはあくまで装飾とし、情報の重要度や選択状態を光の帯だけで示さないようにします。

HueRollではHEXを入力して色を調整し、選んだ色と白・黒とのコントラスト比を確認できます。ただし、任意の2色間の比較やAA・AAAの自動判定には対応していません。実際に接する背景・文字・枠・ボタンの組み合わせは別途検証してください。