紫とゴールドを上品に使うには？Webの装飾を目立たせすぎない配色

紫とゴールドをWebページに組み合わせると、深みと華やかさを両立させたい場面に役立ちます。ただし、見出し・ボタン・枠線のすべてを金色にすると、何を先に見てほしいのか分かりにくくなることがあります。装飾を目立たせすぎないコツは、紫を情報の中心に置き、ゴールドを短い線や小さな飾りに限定することです。工芸展の特設Webページを例に、二つの配置を比較します。

紫を主役にし、ゴールドは情報を支える装飾にする

まず「読ませる色」と「飾る色」を分けます。紫を見出しや主要ボタンに使い、ゴールドは見出しの下線や区切りの一部だけに置きます。ゴールドに文字の強調や操作の案内まで任せないことが大切です。

ここでは落ち着いた紫の■#493454と、黄みを抑えたゴールドの■#B99B69を基準にします。HEXコードとは「#」に続く数字や英字でWebの色を指定する表記です。画面上の単色のゴールドには金属そのものの光沢があるわけではないため、色を明るくするだけで高級感が決まるとは限りません。周囲の余白や配置も合わせて考えます。

例えば、見出しの下に幅40px・太さ2pxほどの短いゴールド線を1本置き、別の場所では同じ線を繰り返しすぎないようにします。写真の周囲にも金色の枠を加えるなら、見出しの線を省くなど、装飾する場所を絞ります。色の面積を先に減らすと、紫の見出しが主役として残りやすくなります。

工芸展の特設ページで比べる二つの配色

明るい背景に紫の見出し、金色の短い線

作品紹介と開催情報が中心のページなら、背景をアイボリーの■#F8F4EFにし、見出しを紫の■#493454、本文と日時を濃いグレーの■#302B30にします。背景とのコントラスト比は見出しが約10.08:1、本文が約12.67:1です。見出しの横や下には■#B99B69の短い飾り線を添え、金色の文字は使わない構成にします。

このゴールドとアイボリーのコントラスト比は約2.41:1で、小さな案内文字に使うには不十分です。あくまで意味を担わない装飾線として使いましょう。来場予約のボタンは紫の■#493454を背景に、白の■#FFFFFFを文字にすると約11.04:1です。操作を促す場所は金色の飾りではなく、文字のあるボタンで示します。

冒頭だけ濃い紫にし、ゴールドを縁に添える

作品写真を印象的に紹介したい場合は、ページ冒頭の大きな見せ場であるヒーロー領域を濃い紫の■#35263Fにし、展覧会名を淡いクリーム色の■#F6EFE6で表示します。文字と背景の比は約12.27:1です。ゴールドの■#D5B778は写真枠の角や見出し脇の細い線に限定します。紫との比は約7.25:1ですが、数値が高いからといって飾りを増やす必要はありません。

冒頭の下に続く作品説明やアクセス情報は、明るい背景■#F8F4EFと濃い文字■#302B30に戻します。濃い紫をページ全体に広げず、冒頭だけに使うことで、鑑賞する部分と情報を読む部分を分けられます。予約ボタンを濃い紫の領域に置く場合は、クリーム色の■#F6EFE6をボタン背景、濃い紫の■#35263Fを文字にすると、文字の比は約12.27:1です。

装飾の量と文字のコントラストを別々に確認する

まず、ゴールドの線がなくても見出しや操作場所が分かるか確かめます。線が情報の区切りや状態を伝える唯一の手掛かりなら、単なる飾りではありません。WCAG（Web Content Accessibility Guidelines、Webコンテンツの利用しやすさに関する指針）2.2のレベルAAでは、通常の文字と背景は4.5:1以上、規定の大きな文字は3:1以上が必要です。操作部品や意味のある図形に不可欠な視覚情報にも、隣接色との3:1以上が原則求められます。一方、意味を持たない装飾線にこの数値を一律に当てはめるものではありません。

スマートフォンでは短い線が相対的に目立ったり、余白が詰まったりすることがあります。画面幅を狭め、見出し・ボタン・写真の優先順位を再確認しましょう。また、写真や半透明の背景に色を重ねたときは、実際に接する色でコントラストを確認してください。

HueRollではHEXコードを入力して濃淡や配色候補を調べ、選択色と白・黒のコントラストを確認できます。任意の2色間の比較やAAの自動判定には対応していません。本文の比率はここに示した不透明な色同士を別途計算した値です。紫で情報を整理し、ゴールドは必要な場所だけに添えると、装飾が内容を邪魔しにくくなります。