ガーネット色を使う配色｜暗い赤に何色を添える？
ガーネット色のような暗い赤に何色を添えるか迷ったら、まず明るい生成りで余白を作り、必要に応じて淡い青緑か落ち着いた金色を少量加えてみましょう。深い赤を見出しに使うか背景に使うかでも、合う文字色と装飾の面積は変わります。アクセサリーの新作案内と小さな音楽会のバナーで、2つの方向を比べます。
暗い赤には生成りを基準に、補助色を一つ添える
ガーネットは宝石の名前に由来する色名で、画面上では暗い赤の一例として#691C23が使われます。別の色見本では、少し明るく赤紫寄りの#942343もガーネットと呼ばれます。宝石のガーネット自体には赤以外の色もあり、色名だけで唯一のカラーコードが決まるわけではありません。ここでは深い赤の#691C23を基準にします。HEX（ヘックス）カラーコードとは、「#」に続く6桁の英数字でWebの色を表す方法です。
最初に添える色には、明るい生成り#F8F3EBを選ぶと暗い赤との明るさの差を作れます。そこから印象を変えるなら、淡い青緑#C7D5CAは情報欄の背景に、落ち着いた金色#D4B68Eは短い線や小さなラベルに使う方法があります。青緑と金色を両方広く使うのではなく、用途に合わせて一方を選ぶと色の役割を整理しやすくなります。
ガーネット色を使う2つのバナー配色例
例1：アクセサリーの新作案内に生成りと淡い青緑を添える
商品写真を見せたいバナーでは、背景の大部分を生成り#F8F3EBにし、「新作アクセサリー」の見出しをガーネット色#691C23で表示します。本文や素材の説明は濃いグレー#292728にして、見出しとの役割を分けます。展示日と会場をまとめる小さな情報欄には淡い青緑#C7D5CAを使い、その中の文字をガーネット色#691C23にします。「作品を見る」ボタンはガーネット色#691C23で塗り、文字は生成り#F8F3EBにします。
淡い青緑の情報欄と生成りの背景は近い明るさなので、別のカードとして認識させる必要がある場合はガーネット色#691C23の枠を付けます。色を足す目的を情報の整理に絞り、写真の周囲まで飾りを増やさないのがポイントです。
例2：夕方の音楽会は暗い赤の背景に金色を小さく添える
落ち着いた告知にしたい場合は、ガーネット色#691C23をバナー全体の背景にします。「夕暮れの室内楽」という見出しと案内文は生成り#F8F3EBにし、金色#D4B68Eは演奏日の短いラベルや見出しの下線に限ります。金色のラベルに文字を載せるなら、その文字はガーネット色#691C23にします。「公演情報を見る」ボタンは生成り#F8F3EBを背景に、ガーネット色#691C23の文字を合わせます。
この例では青緑を加えず、暗い赤・生成り・金色の3色にとどめます。金色を大きく使うよりも、日付や区切りに集中させたほうが見出しとボタンを主役にしやすくなります。なお、単色の金色は実物の金属光沢を再現するものではありません。
淡い補助色と暗い文字のコントラストに注意する
コントラスト比とは、文字と背景など隣り合う色の明るさの差を示す数値です。Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が求められます。ガーネット色#691C23と生成り#F8F3EBは約10.61:1、濃いグレー#292728と生成り#F8F3EBは約13.43:1です。また、ガーネット色#691C23と淡い青緑#C7D5CAは約7.70:1、ガーネット色#691C23と金色#D4B68Eは約6.08:1で、いずれも通常文字の基準を満たします。
一方、淡い青緑#C7D5CAと生成り#F8F3EBの比は約1.38:1、金色#D4B68Eと生成り#F8F3EBも約1.75:1です。どちらも通常サイズの文字や、操作に必要な枠をこの色差だけで表す用途には適しません。ガーネット色#691C23と濃いグレー#292728も約1.27:1なので、暗い赤の背景に濃い文字を重ねないようにします。操作に必要な枠・アイコンなどは隣接色との比を原則3:1以上確かめ、純粋な装飾線とは区別してください。
HueRollで確認できるのは、選んだ色と白・黒のコントラストだけです。ガーネット色と生成りなど任意の2色の比較やAAの自動判定には対応していないため、実際に隣り合う色を別途計算して確認しましょう。