ベージュとカーキで地味に見せない配色｜明るさと差し色を調整

ベージュとカーキは、どちらも彩度を抑えた色として組み合わせやすい一方、明るさが近い色だけを並べると、Webページの見出しや操作する場所が埋もれることがあります。地味に感じたときは、むやみに鮮やかな色を増やすのではなく、カーキの濃さを役割に合わせて変え、差し色を少しだけ加える方法を試しましょう。

ベージュとカーキは明るさを分けるとメリハリが付く

ベージュとカーキには複数の色みがあり、色名だけで一つのコードが決まるわけではありません。この記事では、やや黄みのあるベージュ■#E9DCC6と緑寄りのカーキ■#666E4Dを基準にします。HEX（ヘックス）は、Web上の色を「#」と6桁の英数字で指定する方法です。

ベージュ■#E9DCC6の上にカーキ■#666E4Dの文字を置くと、コントラスト比は約3.98:1です。コントラスト比は、2色の相対的な明るさの差を示します。大きな見出しには使える場合があっても、通常サイズの文字に求められる4.5:1には届きません。そこで見出しやリンク用のカーキを、もう一段濃い■#465039にすると約6.29:1になります。

差し色には赤みのあるテラコッタ■#A34C35を小さく添える方法があります。黄みのあるベージュと緑寄りのカーキに対し、少し色相（赤・緑など色みの種類）が異なるため、予約や申込みの場所を分ける候補になります。ただし、アクセントの使いすぎは避け、押してほしいボタンなどに絞ります。

アウトドア用品のレンタルページで背景を入れ替える

テントと折りたたみチェアのレンタル案内ページなら、写真・貸出内容・料金・予約の順に情報を置きます。色数は増やさず、背景の面積を変えて次の2案を比べられます。

• ベージュ主体の案：ページ上部と写真の周囲をベージュ■#E9DCC6で広く取り、見出しを濃いカーキ■#465039、説明文をチャコール■#34382Eにします。説明文とベージュの比は約8.86:1です。料金カードはオフホワイト■#FAF7F1にし、予約ボタンだけをテラコッタ■#A34C35の面と白■#FFFFFFの文字にします。ボタン文字と面は約5.77:1、ボタンとベージュの背景は約4.26:1です。
• カーキ主体の案：最初の短い案内帯をカーキ■#666E4Dにし、そこにオフホワイト■#FAF7F1の見出し・短い案内文を置きます。この組み合わせは約5.03:1です。写真・貸出条件はその下のオフホワイト■#FAF7F1へ移し、本文をチャコール■#34382Eにします。予約ボタンはこの明るいエリアにテラコッタ■#A34C35で配置し、白■#FFFFFFの文字を使います。ボタンと周囲の背景は約5.39:1です。

前者は写真や商品説明に広い余白を残したい場合、後者は冒頭の短いメッセージをはっきり見せたい場合の一例です。テラコッタは「予約する」の一か所に使い、写真や見出しの周囲まで同じ色で囲まないようにすると役割が明確になります。

差し色の置き場所と淡いカードの境界を確認する

テラコッタ■#A34C35とカーキ■#666E4Dの比は約1.07:1しかありません。そのため、カーキの帯にテラコッタのボタンを直接置くと、色みは異なってもボタンの面を見分けにくくなります。差し色を選ぶときは色そのものだけでなく、実際に隣り合う背景との明るさの差を確認しましょう。

また、ベージュ■#E9DCC6とオフホワイト■#FAF7F1の差は約1.27:1です。カードの輪郭が必要なら、くすんだカーキグレー■#737866の枠線を添えると、ベージュとは約3.37:1、オフホワイトとは約4.26:1になります。淡いセージ系の■#DDE2D1をベージュに重ねる案は、面同士の比が約1.02:1とさらに小さいため、重要な区切りをこの2色の差だけで示さないようにします。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字には原則4.5:1以上、大きな文字には3:1以上、操作部品の識別に必要な視覚的な手がかりには隣接色と3:1以上が求められます。飾りの線はすべてが対象になるわけではありませんが、申込欄など必要な境界や操作状態は実際の表示でも確認します。

HueRollではHEXで色を調整し、関連する配色候補と、選択色に対する白・黒のコントラストを確認できます。ただし、任意の2色を直接比較する機能やWCAGの自動判定はありません。今回のベージュ・カーキ・差し色などの組み合わせは、別途2色ずつ計算しています。