WEBサイトがぼやけて見える原因は？コントラストを整える配色
WEBサイトがぼやけて見えるのは、必ずしも色が薄いからではありません。文字と背景、入力欄の枠線と周囲、ボタンとページの明暗差が同時に小さいと、どこを読んで何を押せばよいか分かりにくくなります。今回は地域の資源回収予約ページを例に、淡い背景は残しながら、情報の輪郭を取り戻す配色の見直し方を紹介します。写真そのものが不鮮明な場合は、解像度など色以外の原因も別に確認してください。
ぼやけの原因は、文字・境界・操作の3か所から探す
最初に本文や見出し、次にフォームやカードの境界、最後に予約ボタンを確認します。コントラスト比は隣り合う色の相対的な明るさの差で、数値が大きいほど明暗差が大きくなります。淡いページ背景#F5F7F8に薄いグレー#9BA8AEの本文を載せると約2.27:1です。さらに白#FFFFFFの入力欄に薄い枠線#CFD9DEを使うと約1.44:1で、どこが入力欄か分かりにくくなる場合があります。
同じように、淡いブルー#C2D8E3のボタンに薄い青#7494A6の文字を載せると約2.18:1、ボタンとページ背景#F5F7F8の差は約1.37:1です。この状態では、色数を増やしても問題は解決しません。文字・部品の境界・主要操作のうち、弱い箇所を優先して直します。
資源回収の予約ページを修正する配色例
回収できる品目、申込期限、希望日時、住所入力、予約確定を並べるページを想定します。背景の淡さを保ち、読み進める順に必要な部分だけ暗くします。HEXはWEBで色を指定する16進数のコードです。
- ページ背景と本文：背景#F5F7F8は変えず、本文色を薄いグレー#9BA8AEからチャコール#263944にします。文字のコントラスト比は約2.27:1から約11.16:1に変わります。背景まで濃くする必要はありません。
- 見出し：薄い青灰#90A3AEから深いブルー#174D68へ変更すると、背景#F5F7F8に対する比率が約2.43:1から約8.50:1になります。文字を大きくするだけに頼らず、色にも明暗差を付けます。
- 回収品目のカード：白#FFFFFFにチャコール#263944で品目名や説明を書くと約11.99:1です。白いカード#FFFFFFとページ背景#F5F7F8の差は約1.07:1なので、余白と枠線で区切ります。
- 住所や希望日時の入力欄：白#FFFFFFの面を保ち、枠線を薄いグレー#CFD9DEからブルーグレー#71828Bへ変更します。白との比率は約1.44:1から約3.99:1になります。入力欄には説明ラベルも表示し、プレースホルダーだけで項目名を伝えません。
- 「予約を確定する」ボタン：淡い背景#C2D8E3と薄い文字#7494A6の組み合わせを、深いブルー#175F7Bの背景と白#FFFFFFの文字に変更します。文字とボタンは約2.18:1から約7.10:1に、ボタンとページ背景#F5F7F8は約1.37:1から約6.60:1になります。
- 補足説明とリンク：補足文字はブルーグレー#526673ならページ背景#F5F7F8と約5.57:1です。本文リンクは深いブルー#174D68にして約8.50:1を確保し、下線でもリンクと分かるようにします。
- 回収日時の案内欄：淡いブルーグレー#E7EFF3を背景に、チャコール#263944で説明すると約10.30:1です。この案内面とページ背景#F5F7F8の差は約1.08:1なので、必要ならブルーグレー#71828Bの境界線を付けます。境界線と案内面の比率は約3.42:1です。
ここでは本文は読むための色、枠線は入力先を見つけるための色、ボタンは予約操作を見つけるための色です。色相を大きく増やさず、それぞれの役割に必要な明暗差を設けると、ページの淡い印象を保ったまま情報を追いやすくできます。
最後は隣り合う色と操作状態を確認する
カードと背景のように色差が小さくても、見出しや余白で十分に構造が分かる場所があります。一方、入力欄の枠線が操作部品を識別するために必要なら、線と隣接色の差を確認します。WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字は背景と4.5:1以上、大きな文字は3:1以上が基準です。操作に必要な非テキストの視覚情報には隣接色と3:1以上が求められますが、すべての装飾的なカード枠線に一律で適用されるわけではありません。
また「受付終了」「入力エラー」「予約完了」を色の濃淡だけで示さず、言葉やアイコンも使います。キーボード操作時のフォーカス表示やスマートフォンでの細い枠線も確認しましょう。HueRollでは選択した色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。この記事の色同士の比率は別途計算しています。