キャメルとネイビーを合わせるコツ｜背景色を変えて比較
キャメルとネイビーは、黄みを含む茶色と暗い青を組み合わせる配色です。同じ2色でも、どちらを大きな背景にするかで、見出しやボタンの目立ち方は変わります。大切なのは「合う・合わない」だけではなく、背景が変わったら文字色や案内欄も調整することです。この記事では靴修理店の予約ページを例に、キャメルを主役にする案とネイビーを主役にする案を比べます。
キャメルとネイビーは背景を決めてから文字色を選ぶ
キャメルはラクダの毛色に由来する、黄みを帯びた茶色です。今回の見本は色見本資料に掲載された#C19A6Bとします。ネイビーは暗い青の呼び名で、今回の配色例では深い青#1D3557を選びます。なお、CSS（Webページの見た目を指定する仕組み）で使われる色名「navy」は#000080であり、今回の見本とは異なります。HEX（ヘックス）は、Webで色を6桁の英数字で指定するコードです。色名だけでなく採用するHEX値を共有しましょう。
キャメル#C19A6Bとネイビー#1D3557のコントラスト比は約4.77:1です。コントラスト比は、隣り合う2色の相対的な明るさの差を示す数値です。通常サイズの文字の4.5:1という目安を数値上は超えますが、十分な余裕が大きいわけではありません。キャメルの背景に長い説明を載せるなら、焦げ茶#2E2A28を文字色として使う案もあり、約5.48:1になります。
一方、ネイビー#1D3557の背景にオフホワイト#F8F5EFを合わせた場合は約11.36:1です。背景をネイビーに替えたときは、見出しと説明も明るい文字に替えると、同じ情報を読み取りやすくできます。
靴修理店の予約ページで背景色を入れ替えて比較する
案1：キャメルを広い背景にする。「お気に入りの一足を長く使う」という靴修理店の見出しをキャメル#C19A6Bの面にネイビー#1D3557で表示すると、文字と背景は約4.77:1です。説明文を焦げ茶#2E2A28に替えると約5.48:1になります。革靴の写真と合わせる場合は、背景を広くキャメルにする案を試し、写真の色との重なりも確かめます。
「修理を相談する」ボタンはネイビー#1D3557の背景に白#FFFFFFの文字を載せると約12.36:1です。ボタンと外側のキャメル#C19A6Bにも約4.77:1の差があります。料金と納期の情報はオフホワイト#F8F5EFのカードに載せ、焦げ茶#2E2A28で文字を表示すると約13.06:1です。ただしカードとキャメルの差は約2.38:1なので、重要な境界にはネイビー#1D3557の2px程度の枠を付けます。枠と外側のキャメルは約4.77:1、内側のオフホワイトとは約11.36:1です。
案2：ネイビーを広い背景にする。同じ見出しと説明を、今度はネイビー#1D3557の背景にオフホワイト#F8F5EFで載せます。文字と背景は約11.36:1です。「無料見積もりを依頼する」ボタンはキャメル#C19A6Bで塗り、文字をネイビー#1D3557にすると約4.77:1です。ボタンと外側のネイビーも約4.77:1あるため、キャメルを操作する場所に集中させる配色にできます。
修理の流れや所要日数は淡いクリーム#E7D9C2の案内欄にまとめ、文字にネイビー#1D3557を使うと約8.89:1になります。案内欄と外側のネイビーの差も約8.89:1です。長い説明をオフホワイト#F8F5EFの別の区画に置く場合は焦げ茶#2E2A28で約13.06:1を確保します。背景を暗くした分、情報を置く明るい面を用意するのがポイントです。
キャメル上の白文字と淡いカードの境界に注意する
キャメル#C19A6Bに白#FFFFFFの文字を重ねると、コントラスト比は約2.59:1で、大きな文字に必要な3:1にも届きません。ネイビーでは白文字が約12.36:1でも、背景をキャメルに替えたら同じ白文字を使い続けないようにしましょう。文字色は背景ごとに確認する必要があります。
また、オフホワイト#F8F5EFと淡いクリーム#E7D9C2のコントラスト比は約1.28:1です。これらの薄い色を並べるだけで重要なカードを区切らず、必要ならネイビー#1D3557の枠や十分な余白を加えます。ネイビーの枠とオフホワイトは約11.36:1、淡いクリームとは約8.89:1です。予約受付中・受付終了といった状態は色だけで示さず、文字でも明記します。
WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。必要な操作部品の境界など、文字以外の重要な表示にも隣接色との3:1以上が必要な場合があります。細い文字や枠の見え方は実際の画面でも確認してください。
HueRollではHEXを入力して選択した色を調整し、白・黒とのコントラスト比を確認できます。ただし、任意の2色間の比較やAA・AAAの自動判定には対応していません。背景・文字・ボタン・案内欄の実際に接する組み合わせを別途確かめましょう。