錆色に合う色は？落ち着いたバナーを作る組み合わせ
錆色（さびいろ）は赤みを含む暗い茶色で、陶器や手仕事を紹介するバナーなどに使うと、落ち着いた雰囲気を作れます。ただし、濃い茶色を全面に広げて文字も暗くすると、内容が埋もれてしまいます。錆色に生成り系の明るい色と淡いセージグリーンを組み合わせ、背景・見出し・日付・ボタンに役割を分ける方法を紹介します。
錆色には生成りと淡いセージグリーンを合わせる
和色大辞典では錆色を#6C3524としています。これは色名を表す参考例で、すべての錆色に共通する唯一の数値ではありません。HEX（ヘックス）は、Web上の色を「#」と6桁の英数字で指定する方法です。ここでは、この錆色を基準に、生成り系の#F7F1E6、淡いセージグリーンの#D8DFC9を合わせます。
濃い錆色#6C3524に明るい生成り#F7F1E6の文字を重ねると、コントラスト比は約8.60:1です。コントラスト比は、背景と文字の明るさの差を表す数値です。生成りの背景に錆色の見出しを置いても、同じ8.60:1を確保できます。錆色を背景にも文字にも使えるため、バナーの主役を変えやすい組み合わせです。
淡いセージグリーン#D8DFC9は、錆色#6C3524と色みが異なり、日付や会場名を短くまとめる補助面に向いています。セージグリーン上の錆色の文字は約7.05:1です。緑を広い背景にせず、小さなラベルとして添えると、錆色を主役にしながら変化を付けられます。
陶芸展の告知バナーを背景別に2パターンで比べる
たとえば陶芸展の告知バナーでは、開催名・日時・会場・「詳細を見る」の案内を載せます。文字の置き場所を決めてから写真を配置すると、作品の色と重なって読みにくくなるのを避けられます。
- 錆色を広く使う案：左側の背景を錆色#6C3524にして、展覧会名を生成り#F7F1E6で大きく表示します。右側に器の写真を置き、文字は写真に重ねません。開催日ラベルは淡いセージグリーン#D8DFC9の面に錆色#6C3524の文字を使い、約7.05:1の差を確保します。「詳細を見る」は生成り#F7F1E6のボタンに錆色#6C3524の文字を載せます。
- 生成りを広く使う案：全体の背景を生成り#F7F1E6にし、展覧会名は錆色#6C3524で表示します。短い説明文には濃いチャコール#342E2Aを使い、生成りとの比は約11.90:1です。予約ボタンを錆色#6C3524にして、文字を生成り#F7F1E6にすれば、ボタンの文字も約8.60:1を確保できます。
前者は短い見出しを力強く見せたい横長バナー、後者は説明や写真を広めに配置したい案内バナーに向いています。両案を同時に使う場合も、錆色と生成りの役割を入れ替えるだけにとどめ、別の強いアクセント色を増やしすぎないようにします。
淡い面の境界と文字の置き方を確認する
生成り#F7F1E6の背景にセージグリーン#D8DFC9のラベルを置くと、2色の比は約1.22:1で、境界が曖昧になりがちです。必要な輪郭には深いグリーングレー#566653の枠線を加える方法があります。枠線はセージグリーンと約4.48:1、生成りと約5.46:1の差があります。一方、このグリーングレーをセージグリーン上の小さな文字に使うと約4.48:1で、通常文字の4.5:1にはわずかに届きません。文字はより濃いチャコール#342E2Aを使うと約9.76:1です。
WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に原則4.5:1以上、大きな文字に3:1以上が求められます。また、セージグリーン#D8DFC9に白#FFFFFFを重ねた文字は約1.37:1しかなく、通常の文字には不適切です。文字を器の写真に直接載せる場合は、写真の暗い部分と明るい部分の両方を確認し、必要なら単色の背景面を敷きましょう。
HueRollでは錆色などのHEXを入力して色を調整し、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色同士の比率比較やWCAGの自動判定には対応していません。今回の生成り・セージグリーン・文字色の組み合わせは、別途2色ずつ計算して確認しています。