ティールとゴールドは合う？背景と装飾を入れ替えた配色例

ティールとゴールドは合うのでしょうか。深い青緑と黄みのある金色は、広い背景と小さな装飾の役割を分けると、互いを引き立てる組み合わせになります。ただし、どちらを背景にするかで見出し・文字・ボタンに必要な明るさが変わります。同じ2色を主役と装飾で入れ替えた、企画展ページとギフト告知バナーの配色例を紹介します。

ティールとゴールドは、背景と装飾の面積を分けると合わせやすい

ティールは青みを含む暗めの緑、ゴールドは黄みのある金色を表す呼び名です。CSS（Webページの見た目を指定する仕組み）の標準色名では、ティールは■#008080、ゴールドは■#FFD700です。ただし、実際の配色で使う色をこの2値に固定する必要はありません。今回は深いティール■#14565Aと落ち着いたゴールド■#E3C36Cを提案します。HEXとは色を6桁の16進数で指定するコードです。

提案したティールとゴールドのコントラスト比（2色の明るさの差）は約4.90:1です。濃いティールの上ではゴールドの線やボタンが区別しやすく、ゴールドの背景にはティールの見出しや枠を置けます。ゴールドを画面に塗るだけで金属特有の反射や光沢が再現されるわけではないため、ここでは「金色を思わせる単色」として使います。

背景と装飾を入れ替えた2つの配色例

陶器の企画展ページ：ティール背景にゴールドの細い装飾

作品を紹介するページの冒頭をティール■#14565Aにし、企画展のタイトルと説明をアイボリー■#FFF9F0で表示します。文字と背景の比は約8.00:1です。見出しの下線や写真の横に添える短い飾り線をゴールド■#E3C36Cにすると、濃い背景と約4.90:1の差を作れます。金色は装飾として小さく使い、文章の行ごとに増やさないようにします。

作品写真を置く領域はアイボリー■#FFF9F0で囲い、写真の明るさが背景のティールに埋もれないようにします。補足の文字には濃い青灰■#253239を使うと、アイボリーとの比は約12.59:1です。「展示情報を見る」ボタンを置くなら、ゴールド■#E3C36Cの背景にティール■#14565Aの文字を載せます。文字とボタンの比は約4.90:1で、ボタンと周囲のティールの差も同じです。

ギフトの告知バナー：ゴールド背景にティールの装飾枠

季節限定のギフトを紹介する横長バナーでは、ゴールド■#E3C36Cを背景の広い面に使い、見出しをティール■#14565Aにします。見出しとの比は約4.90:1です。短い装飾線やバナーの角の枠にもティールを使うと、ゴールドが広くても情報の輪郭を引き締められます。長い説明文は濃い青灰■#253239にすると、背景との比は約7.71:1です。

販売日や価格はアイボリー■#FFF9F0のカードにまとめ、文字を濃い青灰■#253239にします。文字との比は約12.59:1ですが、カードとゴールドの背景の差は約1.63:1しかありません。情報カードの境界が必要ならティール■#14565Aの枠を加え、ゴールドの外側と約4.90:1、カードの内側と約8.00:1の差を確保します。「商品を見る」ボタンもティールの背景と白■#FFFFFFの文字なら約8.37:1で、金色の周囲からボタンを区別できます。

見やすさを保つ装飾の量と文字色の注意点

ゴールド■#E3C36Cと白■#FFFFFFの比は約1.71:1です。金色の背景に白文字を載せると、通常の本文に必要な差が足りません。ゴールドの面にはティールや濃い青灰の文字を選びましょう。また、ティールの背景にゴールドの細い線をたくさん入れても、すべてが重要な区切りに見えるとは限りません。飾り線は少量に絞り、状態や意味を示す箇所にはラベルや十分な輪郭を用意します。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。操作部品や意味のある図形を見分けるための視覚情報も、隣接色との3:1以上が必要になる場合があります。HueRollではHEXから関連色や配色候補を探し、選択色と白・黒の比を確認できます。ただし任意の2色の比較やAA・AAAの自動判定はできないため、実際の配色は別途確認しましょう。