瑠璃色とゴールドを使うには？装飾の量で変わる配色の印象

瑠璃色とゴールドを合わせるときは、ゴールドを少量の線や印にとどめるか、帯や情報パネルまで広げるかで画面の印象が変わります。濃い青を主役にして金色を絞れば端正な構成に、金色の面積を増やせば装飾の存在感が強まります。どちらの場合も文字や操作ボタンは色だけで判断せず、実際のコントラストを確かめて配置しましょう。

瑠璃色を基準に、ゴールドを装飾と情報面で使い分ける

瑠璃色（るりいろ）は宝石の瑠璃、つまりラピスラズリに由来する、紫みを含んだ濃い青です。I-IROの見本■#1C529D（RGBは赤28・緑82・青157）をこの記事の基準にします。和色大辞典には近い■#1E50A2という別の値もあるため、使用する資料とコードをそろえて管理します。HEX（ヘックス）はWebで色を指定する「#」と6桁の英数字による形式です。

組み合わせるゴールド■#D4AF62、温かいアイボリー■#F7F3EB、濃いチャコール■#27313Fは今回選んだ配色例です。ゴールドは金属の色を連想させる呼び名ですが、この単色のコードだけでは光沢や反射は再現されません。画面ではまず光沢のない色面として考えます。

瑠璃色■#1C529Dとゴールド■#D4AF62のコントラスト比は約3.69：1です。コントラスト比とは2色の相対的な明るさの差を示す数値です。ゴールドを青い面の短い装飾線に使うと区切りとして見せられますが、通常サイズの金色の文字には十分な差ではありません。本文や重要な日付は白■#FFFFFFなどの別の文字色で示します。

金色5％と15％の配分で二つのページを考える

例A：美術館の特別展案内で、装飾を控える。画面の背景・装飾の色面を仮に「瑠璃色65％、アイボリー30％、ゴールド5％」と考えます。大きな瑠璃色■#1C529Dの見出し背景に展覧会名を白■#FFFFFFで載せ、開催日や料金はアイボリー■#F7F3EBの領域にチャコール■#27313Fでまとめます。青と白の文字コントラスト比は約7.66：1、チャコールとアイボリーは約11.88：1です。ゴールド■#D4AF62はタイトル下の短い線やコーナーの飾りに限定します。「展覧会の詳細を見る」ボタンはアイボリー上に瑠璃色■#1C529Dの面と白■#FFFFFFの文字で配置します。青い面積が大きくても装飾は細部にとどまり、情報の順番が整理しやすい案です。

例B：贈答用のお菓子の特設ページで、装飾を増やす。今度は「アイボリー55％、瑠璃色30％、ゴールド15％」を仮の目安にします。アイボリー■#F7F3EBの余白と商品写真を主役にして、瑠璃色■#1C529Dで商品群の見出しや主ボタンを作ります。ゴールド■#D4AF62は細い線だけでなく、短い「限定セット」の情報パネルに使い、文字はチャコール■#27313Fにします。ゴールドとチャコールの比は約6.33：1なので通常サイズの文字にも使いやすい組み合わせです。金色の面が増える分、強調箇所も増えて華やかに見せる構成ですが、重要度の低い欄まで金色にしないようにします。

この5％と15％は完成デザインの固定ルールではなく、装飾量を比較するための例です。写真や余白、スマートフォン幅で見える範囲に合わせて調整してください。どちらも装飾だけで情報を伝えず、「限定」「申込み」などの意味は文字でも示します。

ゴールドの文字と枠線は背景ごとに確認する

ゴールド■#D4AF62と白■#FFFFFFのコントラスト比は約2.08：1のため、金色の面に白い本文を載せる使い方は避けます。また、瑠璃色■#1C529Dの上のゴールド■#D4AF62は約3.69：1で、WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAが通常サイズの文字に求める4.5：1以上には届きません。大きな文字は3：1以上が基準ですが、実際の文字サイズ・太さも確認が必要です。金色は装飾、本文は白などと役割を分けると判断しやすくなります。

ゴールド■#D4AF62とアイボリー■#F7F3EBの差も約1.88：1と小さめです。アイボリーの上に金色の細枠だけで入力欄を示すのは避け、必要なら瑠璃色■#1C529Dの輪郭を使います。瑠璃色とアイボリーは約6.92：1です。操作部品の識別に必要な視覚情報には、隣接する色と原則3：1以上の差が求められます。薄い線の見え方やフォーカス表示も実際の画面で確認しましょう。

HueRollではHEX入力で選択色を調整し、その色と白・黒のコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動合否判定には対応していません。この記事の瑠璃色・ゴールド・文字色の組み合わせは別途計算しています。