WEBサイトのボーダー色は何色がいい？主張しすぎない区切り方

WEBサイトのボーダー（枠線・区切り線）は、濃すぎると画面を細かく分断して見せ、薄すぎると入力欄や選択中の項目が分かりにくくなります。だからといって、すべての線を同じグレーにする必要はありません。線が単なる飾りなのか、情報のまとまりを示すものなのか、操作に必要な輪郭なのかで色を選びます。ここでは音響機材レンタルの料金比較・予約ページを例に考えます。

ボーダーは「装飾」と「操作に必要な輪郭」を分けて決める

文章の区切りに置く細い線は、見出しや余白ですでに段落が区別できるなら、主張の弱い色にできます。一方、周囲と同じ色の入力欄を見つけるための枠線や、選択中を示す唯一の輪郭には、より明確な明暗差が必要です。まず線をなくしても情報や操作が分かるかを考えると、濃さを決めやすくなります。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、入力欄の存在や選択状態などの識別に必要な非テキストの視覚情報は、隣接する色と原則3:1以上のコントラスト比が必要です。コントラスト比は色同士の相対的な明るさの差です。ただし、すべての装飾的な線や、文字だけで操作を識別できるボタンの枠線へ一律に3:1を求めるものではありません。通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上を別に確認します。

薄い背景と白いカードのように面の色が近いときも、カードの線だけを目立たせるのではなく、見出し・余白・情報の配置を組み合わせて区切り方を考えましょう。

音響機材レンタルの料金表とフォームの配色例

マイク・スピーカー・ミキサーの料金比較、貸出日の選択、予約フォームを掲載するページを想定します。HEXはWEBで色を指定する16進数のコードです。本文を読む線と操作を見つける線を分けて設計します。

• ヘッダー：深いブルーグレー■#2A4858に白■#FFFFFFでサイト名を表示します。文字と背景の比率は約9.69:1です。ヘッダー自体は濃い面で区切り、さらに線を増やしません。
• ページ背景と文字：オフホワイト■#F8F7F3にチャコール■#29343Aで本文を書くと約11.90:1です。見出しを青灰■#375367にすると同じ背景で約7.55:1です。
• 説明文の飾りの区切り線：淡いグレー■#D3D9D8をオフホワイト■#F8F7F3の上に使うと約1.33:1です。見出しと余白で内容が区別できる場所なら、この線は装飾として控えめにできます。重要な情報を区別する唯一の線には使いません。
• 料金表の行の区切り：白■#FFFFFFの表に淡いブルーグレー■#CDD6D8を使うと約1.48:1です。項目名・見出し・余白だけでも行と列を追える表に限って補助線として使い、行の境界そのものが料金を理解するために不可欠なら、より濃い線に変えます。
• 機材カード：白■#FFFFFFと周囲のオフホワイト■#F8F7F3の差は約1.07:1です。商品写真・機材名・価格をまとめるカードは余白で分け、必要なら淡いグレー■#D3D9D8の線を添えます。枠線を唯一の区別手段にしないことがポイントです。
• 貸出日の入力欄：白■#FFFFFFの入力面を見分ける線として、薄いグレー■#CBD3D3では白との比率が約1.52:1しかありません。グレー青■#717F87へ変更すると白■#FFFFFFと約4.13:1、ページ背景■#F8F7F3と約3.85:1になります。
• 選択中のレンタルプラン：淡いミント■#E4F1F1の面に濃い青■#30596Dで太めの輪郭線を引きます。線と選択面は約6.54:1、線と周囲のオフホワイト■#F8F7F3は約7.06:1です。「選択中」の文字やチェック表示も付け、線色だけに頼りません。
• キーボード操作のフォーカス：Tabキーで入力欄へ移動したときは、通常の枠線とは別に深い青■#204F76の輪郭を表示します。オフホワイト■#F8F7F3に対して約8.02:1、白■#FFFFFFに対して約8.60:1です。細すぎて見えない線にしないようにします。
• 入力エラー：日付が未入力なら、赤茶■#963E3Bの枠線を白■#FFFFFFの入力欄に使うと約6.89:1です。オフホワイト■#F8F7F3上に同じ赤茶でエラー文を表示すると約6.42:1です。「貸出日を選択してください」と文字でも修正方法を伝えます。
• 補足案内と予約ボタン：淡い青緑■#E9F1F0の案内面にチャコール■#29343Aの文字を置くと約11.12:1です。申込みボタンは青緑■#256879に白■#FFFFFFの文字を使い約6.30:1、ボタンとオフホワイト■#F8F7F3は約5.87:1です。ボタンの輪郭を目立たせるために別の枠線を増やす必要はありません。

このように、読むための補助線は薄く、入力欄や選択状態に必要な輪郭は十分に濃くします。すべての線を目立たせるより、線を必要とする箇所を先に選ぶほうが、料金表もフォームもすっきり整理できます。

線の太さと隣接色を、実際の画面で確かめる

ボーダー色が同じでも、線を置く背景が変われば見え方は変わります。例えばグレー青■#717F87の枠線は、白■#FFFFFFに対して約4.13:1、淡い青緑■#E9F1F0に対しても約3.60:1です。フォームを別の背景へ移動したら、実際に隣り合う色との比率を確認してください。

1ピクセル程度の細い線は、数値上のコントラストが十分でも画面の描画によって薄く見えることがあります。操作に必要な輪郭やフォーカスには、太さ・間隔も含めて十分に見える表示を用意します。逆に説明文の装飾線は、色を濃くするより余白を整えた方が自然に区切れる場合があります。

スマートフォンでも料金表の項目、入力欄、選択中のプラン、キーボードのフォーカス表示を確認します。HueRollでは選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。この記事で示した色同士の比率は別途計算しています。