レンガ色のカラーコードを選ぶには？赤みと茶色みを見比べる
レンガ色をWebデザインに使おうとすると、赤みの強いものから茶色に近いものまで、さまざまなカラーコードが見つかります。どれを選ぶべきか迷ったときは、色名だけで決めず、候補を同じ背景に並べて赤み・茶色みと明るさを比べることが大切です。この記事では3つのHEXコードを見比べ、陶器の展示サイトの見出しやボタンに使う例を紹介します。
レンガ色のコードは一つではない｜まず3色を並べて比較
レンガ色は、焼いたレンガを思わせる赤茶系の色を指しますが、Webで共通の一つのHEXコードに定められているわけではありません。HEXコードは「#」の後に16進数を並べた色の表記で、6桁の場合は赤・緑・青の成分を2桁ずつ指定します。色名を入力するだけで同じ色になるとは限らないため、具体的なコードを決めましょう。
比較用に選んだ3つの候補は次のとおりです。いずれも記事用の例で、レンガ色の公式な基準値ではありません。
- 赤みが強め：#B54A37。赤の成分が181、緑が74、青が55で、赤がはっきり感じられる色です。
- 赤と茶色の中間：#A45A43。赤164、緑90、青67で、最初の色より彩度を抑えた印象です。
- 茶色みが強め：#794D38。赤121、緑77、青56で、暗さも増した落ち着いた候補です。
3色は赤みだけでなく、明るさや鮮やかさも異なります。赤の数値だけを比べて優劣を決めず、同じ面積・同じ背景で見比べると違いをつかみやすくなります。鮮やかさを出したい見出しなら赤寄り、写真を支える落ち着いた見出しなら茶色寄り、と用途から絞り込みましょう。
陶器の展示サイトで文字・ボタンに置いて確かめる
明るい背景で見出しの色を比べる
例えば陶器の展示サイトで、ページ背景を温かみのあるオフホワイト#F8F2E8にします。この背景に赤寄りの#B54A37を見出しとして載せた場合、文字とのコントラスト比は約4.72:1です。中間の#A45A43は約4.58:1、茶色寄りの#794D38は約6.43:1になります。いずれも数値上は通常の文字の4.5:1を超えますが、赤寄りと中間色は余裕が小さいため、背景を変えたら必ず再確認します。
作品説明などの長い本文には、さらに濃いグレー寄りのブラウン#352C27を使うと、同じ背景#F8F2E8との比は約12.24:1です。本文をレンガ色にそろえる必要はありません。色の個性は見出しや小さなラベルに集める方が、文章の情報を整理しやすくなります。
茶色寄りをボタンに使う場合
「作品を見る」ボタンは茶色寄りの#794D38を背景に、白#FFFFFFを文字にすると約7.16:1です。見出しを赤寄りにした場合でも、ボタンを少し暗い色にすれば操作箇所を区別できます。逆に、赤寄りの#B54A37をボタン背景にして白#FFFFFFを載せる場合も約5.25:1です。ボタンの色は周囲の背景、写真の赤み、配置する数も合わせて選びます。
背景を変えたら文字色も確認する
背景を少し濃いベージュ#EDE0D5に替えると、赤寄り#B54A37の文字は約4.06:1、中間の#A45A43は約3.94:1に下がります。どちらも一般的な大きさの本文の4.5:1には届きません。一方、茶色寄り#794D38なら約5.53:1です。また、明るくしたレンガ色#C8725Eはオフホワイト#F8F2E8上で約3.13:1なので、小さな文字には避け、装飾や広い色面で検討します。
WCAG（Web Content Accessibility Guidelines、Webの利用しやすさを定めた指針）2.2のレベルAAでは、通常サイズの文字に背景との4.5:1以上、規定の大きな文字に3:1以上のコントラスト比が求められます。数値を満たしていても、細い書体や写真の上では見づらくなる場合があります。ここで示した比率は指定した不透明な2色同士を別途計算した値です。
HueRollではHEXコードを入力して濃淡や関連色を見比べ、選択した色と白・黒のコントラストを確認できます。ただし、任意の2色間の比率やAA判定を自動で調べる機能はありません。最初に赤寄り・中間・茶色寄りの候補を並べ、使う背景と文字の組み合わせで絞り込むと、目的に合うレンガ色を選びやすくなります。