屋外でも見やすいWEB配色とは？スマホ画面のコントラストを考える

屋外でスマホのWEBページを開くと、室内では読めた文字やボタンが日差しの下で見づらくなることがあります。画面への光の映り込みや周囲の明るさが、色の見え方に影響するためです。屋外向けの配色は「明るい色を増やす」だけではなく、文字・背景・操作部分の組み合わせを確認して決めます。

鮮やかさより、文字と背景の明るさの差を確保する

まず優先するのは、重要な文字と、その直後ろにある背景のコントラスト比です。これは2色の相対的な明るさの差を数値で表したもので、色相（青や赤などの色の種類）が違うだけでは大きくなりません。淡い背景に薄いグレーの文字を載せると、日差しの下ではさらに区別しづらい場合があります。

文字の色を決めたら、次はボタンや案内アイコンと、その隣にある背景を確認します。屋外だからといって、画面全体を高彩度の色で塗る必要はありません。背景を静かな色で揃え、行き先や申込みなど必要な操作に濃い色を割り当てた方が、色の役割を見失いにくくなります。

また、写真や地図の上に文字を直接重ねると、文字の背景が場所ごとに変わります。文字の後ろに不透明な案内面を設ければ、写真の明暗が変わっても組み合わせを確認しやすくなります。ただし、画面の映り込みは色コードだけでは解消できません。

屋外マルシェの会場案内を7色で設計する例

屋外マルシェの来場者が、スマホで「受付の場所」「入場口」「会場図」を探す案内ページを想定します。以下のHEX（「#」と6桁の英数字からなるカラーコード）は、この画面向けの提案例です。

ページ背景を淡いブルーグレー ■#F4F7FA、受付案内のカードを白 ■#FFFFFF にします。この2色の比は約1.08:1で、背景色の違いだけではカードの境目が分かりにくいため、カードの間に余白を確保します。受付場所の見出しと本文は深いネイビー ■#203448 にし、白いカード ■#FFFFFF との比を約12.76:1とします。ページ背景 ■#F4F7FA に直接文字を置く場合も約11.86:1です。

「受付時間」や持ち物などの補足はブルーグレー ■#425566 を白いカード ■#FFFFFF に使い、比は約7.71:1です。案内枠の輪郭が必要なら、グレーブルー ■#657A88 の線を使います。線とカードの白 ■#FFFFFF は約4.48:1、線とページ背景 ■#F4F7FA は約4.16:1なので、薄い背景同士の差だけに頼らず境界を示せます。

特に見つけてほしい「受付は東ゲート」という案内は、淡い水色 ■#E7F2F6 の面に深いネイビー ■#203448 の文字を載せます。文字と案内面の比は約11.20:1です。方向を示す矢印アイコンには濃い青 ■#075B78 を使えば、案内面 ■#E7F2F6 との比は約6.64:1となります。矢印だけで行き先を伝えず、「東ゲート」と文字でも示します。

「会場図を開く」ボタンは濃い青 ■#075B78 を背景に、白 ■#FFFFFF の文字を組み合わせます。文字とボタンの比は約7.56:1、ボタンとページ背景 ■#F4F7FA の比は約7.03:1です。写真を背景とするボタンではなく不透明な塗りつぶしにすることで、背後の画像による文字の見え方の変動を避けられます。

日差しの下では数値と実際の画面を両方確認する

完成したら、屋内だけでなく日なたと日陰でスマホの画面を確認します。画面の自動明るさ調整、保護フィルム、映り込み、端末ごとの表示の違いも関係します。文字を拡大しても見出しと案内が崩れないか、ボタンや矢印を一目で見つけられるか、実際の利用状況で試してください。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、通常サイズの文字と背景の比は原則4.5:1以上、大きな文字は3:1以上です。操作に必要なアイコンや輪郭線などの視覚情報は、原則として隣接色と3:1以上が基準です。ただし、これらはWEB上の色を比較する基準であり、屋外の強い光の下でも必ず読めることを保証する数値ではありません。

HueRollでは色の濃淡候補や、選択色と白・黒とのコントラストを確認できます。一方、任意の2色を直接比較したり、AA・AAAを自動判定したりする機能はありません。案内の淡い水色 ■#E7F2F6 と濃い青 ■#075B78 のような組み合わせは別の方法で計算し、最後は屋外の実機表示でも確かめましょう。