サンドベージュとテラコッタの配色｜似た色でもメリハリをつけるには？
サンドベージュとテラコッタは、どちらも土や砂を連想させる暖色系の色です。一緒に使うと自然なまとまりを作れますが、色だけを並べても情報の区切りやボタンが十分に目立つとは限りません。ポイントは、広い背景・強調する面・文字・枠にそれぞれ違う役割を与えることです。この記事では架空の「秋の寄せ植え教室」の告知ページを例に、2色の面積を入れ替えた配色を比較します。
2色を重ねず、濃い文字色でメリハリを作る
サンドベージュは砂を思わせる黄みのあるベージュで、今回は色見本資料にある#D3C6A6を採用します。テラコッタは焼いた土を連想させる赤みの強い橙色系で、見本は#E2725Bです。どちらも色名から一つの数値が決まるわけではありません。HEX（ヘックス）はWebで色を6桁の英数字で指定する形式なので、制作時は色名とコードをセットで共有しましょう。
サンドベージュ#D3C6A6は明るく黄みが穏やかな色、テラコッタ#E2725Bは赤みが目に入りやすい色です。ただし、両色のコントラスト比は約1.83:1です。コントラスト比とは隣り合う色の明るさの差を表す数値で、色みが違っても境界を強く見せられるとは限りません。2色の一方をもう一方の上の小さな文字に使うのではなく、面として役割を分けます。
文字には黒に近い焦げ茶#25211Eを追加します。サンドベージュ#D3C6A6上では約9.43:1、テラコッタ#E2725B上でも約5.17:1です。両背景で共通の文字色を使えるため、背景の主役を入れ替えても見出しや説明の色を増やさずに済みます。
秋の寄せ植え教室で背景の主役を入れ替える
案1：サンドベージュを広く、テラコッタを小さく使う。「秋の寄せ植え教室」の見出しと短い説明を焦げ茶#25211Eにして、広い背景をサンドベージュ#D3C6A6にします。文字と背景の比は約9.43:1です。「定員12名」などの案内帯をテラコッタ#E2725Bにし、帯の文字を焦げ茶#25211Eにすると約5.17:1になります。ただし帯と周囲のサンドベージュの差は約1.83:1なので、情報を区切る必要があれば焦げ茶の枠を付けます。枠は内側のテラコッタと約5.17:1、外側のベージュと約9.43:1です。
持ち物や参加費の詳細はオフホワイト#FBF8F1のカードにまとめ、焦げ茶#25211Eの文字で約15.06:1を確保します。カードとサンドベージュの差は約1.60:1なので、必要な輪郭には灰茶色#74624Bを使います。枠は外側のサンドベージュと約3.45:1、内側のオフホワイトと約5.51:1です。「参加を申し込む」ボタンは濃いテラコッタ#8C3A29を背景に、オフホワイト#FBF8F1の文字を載せます。文字とボタンは約7.19:1、ボタンと周囲のサンドベージュは約4.50:1です。
案2：テラコッタを冒頭の主役にする。鉢植えの写真を大きく見せる短い告知では、冒頭の背景をテラコッタ#E2725Bにし、見出しと紹介文を焦げ茶#25211Eで載せます。コントラスト比は約5.17:1です。開催日と会場はサンドベージュ#D3C6A6の情報欄に移し、文字を焦げ茶にすると約9.43:1です。赤みのある背景と黄みのある情報欄は約1.83:1しか離れていないため、情報欄には焦げ茶の枠や余白を加えます。
「空き状況を確認する」ボタンはテラコッタの面に焦げ茶#25211Eの背景で置き、文字をオフホワイト#FBF8F1にします。ボタン内の文字は約15.06:1、ボタンと周囲のテラコッタは約5.17:1です。詳しい説明は下のオフホワイト#FBF8F1の区画に移して焦げ茶の文字を使い、写真や鮮やかな色に埋もれないようにします。
淡い背景の境界と白文字のコントラストを確認する
テラコッタ#E2725Bにオフホワイト#FBF8F1の文字を直接載せると約2.92:1です。大きな文字の3:1にも届かず、通常サイズの文字にはさらに不十分です。また、サンドベージュ#D3C6A6に白#FFFFFFの文字を載せた場合も約1.69:1です。文字は焦げ茶を基本とし、明るい文字が必要なら十分に暗い背景を別に設けましょう。
WCAG 2.2というWebのアクセシビリティ指針では、レベルAAの通常サイズの文字に4.5:1以上、大きな文字に3:1以上を原則求めています。操作部品の識別に必要な枠や意味を持つ図形にも、隣接色との3:1以上が必要な場合があります。一方、単なる装飾の線すべてに同じ条件があるわけではありません。「受付中」「満席」などは色だけで表さず、言葉でも示しましょう。
HueRollではHEXを入力して色を調整し、選択色と白・黒のコントラスト比を確認できます。ただし、任意の2色同士の比較やAA・AAAの自動判定はできません。完成する画面では文字・背景・枠・ボタンの実際の組み合わせを別途確かめてください。