スマホで淡い色を使うときの注意点｜境界を見失わない配色
スマホの予約画面に淡いブルーやグリーンを使うと、やわらかい雰囲気にまとめやすくなります。ただし、背景・入力欄・選択中の項目をすべて淡色にすると、どこから操作できるのか分からなくなることがあります。狭い画面では、色を濃くする場所を絞り、必要な境界だけを明確にすることが大切です。
淡い面は、操作に必要な境界と装飾を分けて考える
淡い色同士は色相が違っても明るさが近く、隣り合う面が一続きに見える場合があります。コントラスト比とは、その2色の相対的な明るさの差を表す数値です。まず「ここは押せる」「この項目が選ばれている」と判断するために必要な線や形を洗い出しましょう。
WCAG 2.2（WEBコンテンツを利用しやすくするための指針）では、操作部品や状態を見分けるのに必要な視覚情報には、隣接する色とのコントラスト比が原則3:1以上必要です。すべてのカードに濃い枠線を付ける義務があるわけではなく、文字や形で操作対象が明確なら、枠全体が必須とは限りません。一方、通常サイズの文字は背景に対して原則4.5:1以上が基準です。
区切りを作る手段は色だけではありません。余白や見出しで内容をまとめ、操作できる部分には識別できる輪郭を与えると、淡い雰囲気を残しながら役割を分けられます。
受取時間を選ぶスマホ画面の配色例
宅配の受取時間を選ぶ画面を想定します。HEX（16進数でWEBの色を指定するコード）を使い、画面背景、選択肢、選択状態を分けた例です。以下の数値は実際に組み合わせる色同士で計算しています。
- ページと案内の面：ページをオフホワイト#F8FBFD、受取時間のまとまりを淡いブルー#EAF4F7にします。差は約1.08:1しかないため、セクション名「受取時間」と余白で範囲を示します。見出しを濃い青灰#253744にすれば、淡いブルーとの比は約10.99:1です。
- 選べる時間帯：「午前中」「14〜16時」などの各行は白#FFFFFFにします。淡いブルー#EAF4F7との差は約1.12:1なので、それだけを選択欄の輪郭にしません。灰青#607986の枠線を使うと、白との比は約4.59:1、外側の淡いブルーとの比も約4.10:1です。行の文字を濃い青灰#253744にすると、白との比は約12.29:1です。
- 補足の文字：「時間帯は後から変更できます」などの案内は淡いブルー#EAF4F7の上で青灰#576A76にすると約5.04:1です。小さく表示する文字を、淡い背景と同じような色にしないことがポイントです。
- 選択した行：背景を淡いグリーン#EDF6E9に変えても、周囲の淡いブルー#EAF4F7との比は約1.01:1です。そこで濃い緑#35704Eの枠を付けます。枠線は内側の淡いグリーンと約5.30:1、外側の淡いブルーとも約5.25:1です。チェックマークと「選択中」の文字も深緑#275D43で表示すると、選択面に対して約6.94:1となり、色の違いだけに頼らず状態を伝えられます。
- 次に進むボタン：濃い青緑#24586Cのボタンをページのオフホワイト#F8FBFDに置くと約7.52:1、白#FFFFFFの「次へ」の文字とは約7.81:1です。ボタン以外の広い面を濃くしなくても、次の操作を区別できます。
細い境界線と操作状態をスマホ幅で確かめる
説明文の区切り線なら、淡いグレー#DCE8EFを淡いブルー#EAF4F7に置いた約1.12:1の弱い線でも、余白や見出しで区切りが分かる場合は装飾として扱えます。しかし、その線が選択欄を見つける唯一の手がかりなら不十分です。必要な境界と飾りの線に同じ薄さを使わないようにします。
指で押しやすい領域を確保し、細い線が実際のスマホ画面で消えないか確認しましょう。キーボードでも操作する場合、白#FFFFFFの欄と淡いブルー#EAF4F7の周囲に対して、それぞれ約6.47:1、約5.79:1となる濃い青#295FA1のフォーカス枠も候補です。背景を半透明にすると隣接色が変わるので、固定色で計算した数値をそのまま当てはめないでください。
HueRollではHEXで候補色を調整し、選択色と白・黒のコントラストを確認できます。ただし、今回のような任意の2色間の比率やWCAGのAA・AAA判定は自動では確認できません。実際に接する色を別途計算し、線の太さや文字の見え方も合わせて見直しましょう。