PCでは見やすいのにスマホで見づらい配色の原因とは？
PCでは見やすいセミナー案内をスマホで開くと、日程の文字が薄く見えたり、申し込みボタンが背景に埋もれたりすることがあります。原因を「スマホだから色が変わる」と決めつけると、必要のない場所まで色を変えてしまいます。文字の大きさ、背景色、部品の並び方を順に調べると、調整すべき部分を絞れます。
同じ色でも、文字サイズや隣接する背景が変わると見づらくなる
文字色と背景色が同じ組み合わせなら、計算上のコントラスト比はPCでもスマホでも変わりません。コントラスト比とは、2色の相対的な明るさの差を示す数値です。ただし、PCでは大きな見出しだった文字がスマホで小さくなったり、横並びの部品が縦に移って別の背景に接したりすると、必要な調整も変わります。写真の切り抜き位置や半透明の背景が変わる場合も、文字の後ろの色を改めて確認する必要があります。
WCAG 2.2（WEBコンテンツを利用しやすくするための指針）のレベルAAでは、通常サイズの文字と背景の比は原則4.5:1以上、大きな文字は3:1以上が基準です。また、操作部品の存在や状態を識別するために必要な図形には、隣接色と原則3:1以上が求められます。数値は重要ですが、細い文字の形や画面の明るさなども実際の見え方に影響します。
セミナー申込み画面でPCとスマホの3つの違いを比較
PCでは日程を横並びのカードで示し、スマホでは縦並びにするセミナー申込み画面を考えます。HEX（16進数でWEBの色を指定するカラーコード）と実際の色の組み合わせで原因を確認します。
- 見出しを小さくした場合：PCの白#FFFFFFのカード上で、青灰#77879Aの約24pxの見出しは、背景との比が約3.67:1です。大きな文字としては3:1を超えますが、スマホで同じ配色のまま14pxの通常の文字に縮めると、4.5:1には届きません。スマホでは白#FFFFFFに濃い青灰#42566Bを合わせれば約7.57:1です。見出しの大きさを保つ方法も考えられます。
- 日程ラベルの背景を変えた場合：PCでは淡い緑#E9F5F1の面に深緑#466E62の「開催日」を置くと約5.13:1です。スマホで面をやや濃い緑#CDE4D8に変えると、同じ深緑#466E62でも約4.28:1に下がります。小さな文字として使うなら不足するため、スマホでは文字を濃い緑#346454に調整すると、新しい背景との比は約5.06:1になります。
- ボタンの隣の色が変わった場合：PCの白#FFFFFFの面では、青#165D7Aの「申し込む」ボタンは周囲と約7.29:1の差があります。白#FFFFFFのボタン文字も青#165D7Aに対して約7.29:1です。しかしスマホでボタンを濃い青#203D54の案内帯に直接置くと、ボタンの青#165D7Aと帯の差は約1.55:1です。文字は読めても、塗り面の差をボタンの主な手がかりにしている場合は輪郭が弱くなります。白#FFFFFFの面を挟むなど、周囲の色から調整します。
この3例では、「文字色が変わった」「画面が小さくなった」だけでは原因を説明できません。見出しのサイズ、ラベルの背景、ボタンに接する色をそれぞれ確かめることが解決につながります。
スマホで見づらい箇所は表示条件を順に確認する
まずPCとスマホで同じ要素を開き、実際の文字色・背景色・文字サイズ・太さを比較しましょう。CSS（WEBページの色や配置などを指定するルール）では、画面幅に応じてこれらを変えることができます。色コードを変えていなくても、スマホ向けの背景指定や要素の移動によって組み合わせが変わっていないか確認します。
次に、幅を少しずつ狭くしながら、文字が折り返された状態やカードが縦に並んだ状態も見ます。写真上の文字、半透明の面、選択中の表示は、背景の変化があっても判別できるでしょうか。「申込み」「選択中」のような言葉や形も添え、色の違いだけに頼らないようにします。コントラスト比が基準を満たしても、実際のスマホ幅で細い文字やアイコンが見えるか確認してください。
HueRollでは候補色をHEXで調整し、選択色と白・黒のコントラストを確認できます。ただし任意の2色同士の比較や、WCAGのAA・AAA自動判定には対応していません。今回の緑のラベルや青いボタンのような組み合わせは別途比率を計算し、実際の表示で仕上げを確認しましょう。