Borderカラーは背景色からどう決める？UIを自然に区切る方法

白いカードでは見えるBorderカラー（枠線・区切り線の色）が、暗い背景に置いた途端に分かりにくくなることがあります。境界線を決めるときは、線そのものの色よりも、線の内側と外側にある背景色を先に確認するのがポイントです。配送状況を管理するWEB画面の「明るい一覧」と「暗い絞り込みパネル」を例に、自然な区切りと操作に必要な輪郭を作る手順を説明します。

Borderカラーは、線の両側の背景から決める

まず、区切りたい場所の背景色を2つ書き出します。例えば、淡いページ背景の上に白い検索欄があるなら、枠線は検索欄の白と外側の淡い色の両方に接しています。背景同士が近い場合は、線の色を先に選ぶのではなく「検索欄が枠線なしでも入力欄だと分かるか」を判断します。

次に、線の役割を分けます。見出しや余白だけでも内容を区別できる場所なら、細い線は装飾として控えめにできます。一方、入力できる領域や選択状態を識別するのに輪郭が必要な場合は、隣接する色とのコントラストを確認します。コントラスト比とは、2色の相対的な明るさの差を表す数値です。

WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2の非テキストコントラスト基準では、操作部品や状態を識別するために必要な視覚情報は、隣接色との比が原則3:1以上必要です。ただし、すべての装飾線や、文字だけで存在が分かるボタンの枠まで一律に3:1以上が必要という意味ではありません。

明るい配送一覧と暗い絞り込みパネルの配色例

配送管理画面の左側に明るい配送一覧、右側に濃い青系の絞り込みパネルがあるとします。HEX（16進数でWEB上の色を指定するコード）で、外側・内側の背景と枠線をセットにした例が次の表です。

明るいカードの装飾線 ■#D5E0E6 は、白 ■#FFFFFF との比が約1.34:1、淡い外側の背景 ■#F2F6F8 との比が約1.24:1です。カードの見出しや余白でまとまりが分かる場所に限定し、枠線だけを唯一の区切りにはしません。

配送先を入力する検索欄には、濃い青灰の線 ■#637789 を使います。内側の白 ■#FFFFFF に対して約4.64:1、外側の淡い背景 ■#F2F6F8 に対して約4.26:1です。これなら、どちらの側から見ても輪郭に明暗差を確保できます。

暗い絞り込みパネルでは、外側を ■#182F40、入力部分を ■#254558 とします。この2色だけの比は約1.36:1なので、入力欄の輪郭が必要なら明るい線 ■#AFCBDE を使います。この線は外側と約8.17:1、内側と約6.00:1です。

同じ線色をすべての場所に使い回せるとは限りません。明色用の線 ■#637789 は暗い入力面 ■#254558 に対して約2.19:1しかなく、反対に暗色用の線 ■#AFCBDE は白 ■#FFFFFF に対して約1.69:1です。そこで、明るい領域と暗い領域ではBorderカラーを別々に管理します。

線の濃さだけでなく、文字・太さ・表示状態も確認する

自然に区切るためには、すべてのカードに強い枠を付ける必要はありません。装飾線は余白や見出しを補うものにとどめ、入力欄や選択状態に不可欠な輪郭だけをはっきり示します。また、細すぎる線は計算上のコントラストが足りていても画面で弱く見える場合があるため、必要に応じて線幅も調整します。

文字は枠線とは別に検証します。白 ■#FFFFFF 上の本文を濃い青灰 ■#203445 にすると約12.82:1、補足文字 ■#536573 でも約6.04:1です。暗い入力面 ■#254558 上の文字を明るい色 ■#F8FBFD にすると約9.76:1です。WCAG 2.2のレベルAAでは通常文字は4.5:1以上、規定の大きな文字は3:1以上が基準です。

フォーカス（キーボード操作で対象になった状態）には、通常の輪郭とは区別できる表示を用意します。画面幅が変わったときや、背景に半透明色を重ねたときも、線が実際に接する色を測り直しましょう。この記事の比率は不透明な単色同士の計算値で、画面全体の基準適合を保証するものではありません。

HueRollではHEXコードと濃淡の候補、選択色と白・黒とのコントラストを確認できます。ただし、白・黒以外を含む任意の2色の直接比較やAA・AAAの自動判定には対応していません。背景の両側に対する比率は別の方法で検証してください。