瑠璃色をWebサイトに使うには？深い青を活かす背景と差し色
瑠璃色（るりいろ）は、わずかに紫みを含む深い青です。Webサイトの背景に使うと印象的ですが、広い範囲を同じ青で埋めると、写真や説明文が目立ちにくくなる場合があります。深い青を主役にしながら情報を読みやすくするには、背景・文字・差し色の役割を分けることが大切です。
瑠璃色は見せ場の背景に使い、読む場所は明るくする
瑠璃色の色見本としてよく使われる一例は#1E50A2です。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で表す形式です。瑠璃色の名前に一つだけの厳密なコードがあるわけではありませんが、ここではこの色を基準に考えます。
ページ冒頭の短い案内や見出し帯に瑠璃色#1E50A2を置くと、色の存在感を出しやすくなります。その上の文字は白#FFFFFFがおすすめです。この組み合わせのコントラスト比（2色の明るさの差を表す数値）は約7.71:1です。WCAG（Webの情報を多くの人が利用しやすくするための指針）2.2のレベルAAという基準で、通常の文字に求められる4.5:1以上を満たします。
一方、商品説明や開催日時まで濃い青の背景に載せ続ける必要はありません。本文の背景を明るい色に切り替えると、瑠璃色を目立たせる場所と、落ち着いて読む場所を分けられます。
ガラス工芸展のサイトで背景と差し色を組み合わせる
例えば、ガラス作品の写真、展示日時、会場案内、来場予約を載せるWebサイトを考えます。色を次のように割り当てると、瑠璃色をサイトの象徴として使いながら、案内情報を整理できます。
- ページ上部の背景：瑠璃色#1E50A2を使い、展示名と短い説明は白#FFFFFFで表示します。青い面を最初の案内部分に絞り、作品写真が続く領域まで広げません。
- 展示内容と会場案内：背景は淡い青みのオフホワイト#F6F8FC、本文は濃い青灰#26394Fにします。文字と背景の比は約11.09:1です。小見出しの瑠璃色#1E50A2も背景に対して約7.25:1あります。
- 作品カード：カード面は白#FFFFFFにします。周囲の淡い背景#F6F8FCとは約1.06:1で境界が弱いため、区切りが必要なら青灰の枠線#667D9Cを添えます。枠線は白い面と約4.22:1、周囲の背景と約3.97:1です。
- 来場予約ボタン：瑠璃色#1E50A2の案内エリア内に、淡いコーラル#F2B8A2のボタンを置き、文字は濃い青灰#26394Fにします。ボタンと周囲の青は約4.46:1、ボタン内の文字は約6.83:1です。
コーラルは青と色みが離れた暖色なので、差し色として使うと予約の場所を見つけやすくできます。ただし、写真やカードまでコーラルで囲むと、瑠璃色が主役ではなくなります。ボタンなど、行動につながる小さな面に絞るのが一案です。
差し色は置く背景と文字色まで確認する
同じコーラル#F2B8A2でも、白に近い本文背景#F6F8FCの上では約1.63:1しかありません。濃い瑠璃色の上に置いたときほどボタンの面がはっきりしないため、配置場所を変えるなら枠線やボタン色も見直しましょう。
また、コーラル#F2B8A2に白文字#FFFFFFを載せると約1.73:1で、通常の文字の基準を満たしません。やわらかい配色にしたい場合も、ボタン内の文字は十分に濃くします。リンクは色だけでなく下線でも示し、スマートフォンでも文字と操作部分を確認してください。
HueRollでは瑠璃色などのHEXコードを確認し、選択した色と白・黒とのコントラストを比較できます。ただし、任意の2色同士の比較やWCAGへの適合の自動判定には対応していません。今回のコーラルと青灰など、独自の組み合わせは別途コントラスト比を計算して確認しています。