ブラウンと水色の組み合わせ｜あたたかい色と涼しい色をまとめる
ブラウンと水色は、あたたかみを感じやすい茶系の色と、涼しげに見せやすい青系の色の組み合わせです。ただし、両方を同じ面積で使うと、どちらを目立たせたいのか分かりにくくなることがあります。この記事ではブラウン#795548と水色#C6E5F2を例に、小さなカフェのWebサイトで背景・見出し・ボタンに役割を与える方法を紹介します。色名に対応する色見本は一定ではないため、ここではこれらの色を制作例として使います。HEX（ヘックス）はWebの色を6桁の英数字で指定するコードです。
あたたかい色と涼しい色は、使う面積でまとめる
ブラウン#795548は赤みを含む落ち着いた茶色で、木製家具やコーヒー豆の写真と組み合わせる候補になります。水色#C6E5F2は明るく彩度が低い青系の色で、広い茶色の画面に軽さを加える役割を持たせられます。どちらの色が必ず「温かい」「涼しい」と感じられるわけではなく、写真・周囲の色・面積によって印象は変わります。
まず主役を一方に決め、もう一方は見出し周辺や案内欄などに限定してみましょう。たとえば濃いブラウンを冒頭の背景に使うなら、水色は短い文字や小さな情報面に絞ります。逆に水色を大きな背景にするなら、ブラウンを文字やボタンに回します。両色の間に温かいオフホワイト#FAF8F3を挟むと、色の切り替わりを緩やかにできます。
カフェのWebサイトで主役を入れ替える2つの配色例
例1：ブラウンを主役にする。カフェの雰囲気を伝える冒頭の背景をブラウン#795548にし、店名の見出しには水色#C6E5F2、短い説明にはオフホワイト#FAF8F3を使います。文字と背景のコントラスト比はそれぞれ約4.96:1、約6.17:1です。コントラスト比とは、文字と背景の明るさの差を数値で表したものです。メニューの詳細はオフホワイト#FAF8F3の背景に切り替え、本文を暗い茶色#2E2925にすると約13.55:1になります。
おすすめメニューの説明カードには水色#C6E5F2を少量使い、カード内の文字を暗い茶色#2E2925にします。この組み合わせは約10.88:1です。「メニューを見る」ボタンはオフホワイトの面に濃い青#27465Aの背景で配置し、白#FFFFFFの文字にすると約9.95:1。ボタンと周囲のオフホワイト#FAF8F3の差も約9.38:1です。茶色の大きな面を保ちながら、水色は情報を整理するための補助色にします。
例2：水色を主役にする。昼のテラス席を紹介するページなら、冒頭の広い背景を水色#C6E5F2にして、見出しと案内文を暗い茶色#2E2925で表示します。文字と背景の比は約10.88:1です。「席を予約する」ボタンはブラウン#795548を背景に白#FFFFFFの文字を載せると約6.55:1で、ボタンと水色の背景も約4.96:1の差があります。下の営業時間やアクセスはオフホワイト#FAF8F3の区画にまとめます。
淡い境界とボタンの文字色を確認する
水色#C6E5F2とオフホワイト#FAF8F3のコントラスト比は約1.25:1なので、両方を背景に使っても境界は強く出ません。区画の見分けが必要なカードには灰みのある青#597780で枠を付けると、水色との比は約3.63:1、オフホワイトとの比は約4.52:1です。ただしこの青は水色の上の通常サイズの文字には約3.63:1と不足するので、枠と文字の役割を混同しないようにします。
WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常の文字に4.5:1以上、大きな文字に3:1以上のコントラスト比を原則求めています。操作に必要な枠など、文字以外の重要な表示にも隣接色との3:1以上が必要な場合があります。背景色だけで情報を分けず、見出し・余白・ボタンの言葉も併用しましょう。
HueRollではHEXを入力して色を調整でき、選んだ色と白・黒とのコントラスト比を確認できます。ただし任意の2色間の比較やAA判定は自動ではできないため、実際に接する色の組み合わせを別途確認してください。