パステルカラーが見づらいときの改善方法｜WEB配色の調整

パステルカラーで作ったWEBページが見づらいとき、背景を全部塗り替える必要はありません。小さな文字が薄い、申込みボタンを見つけにくい、選択した日が分からないなど、困っている箇所を分けて直すと、淡い雰囲気を残しながら使いやすくできます。ここでは架空の星空観察会の予約日ページを例に、修正前後を比較します。

「文字・操作・選択状態」のどこが見づらいか調べる

パステルカラーとは、明るく淡い色のことです。背景に使うだけなら問題にならなくても、文字やボタンまで淡くすると、隣の色との明暗差が小さくなることがあります。最初に本文や補足文字を読む場所、押せるボタン、選択済みの日付の3か所を確認しましょう。背景だけが原因と決めつけず、読めない文字・見つからない操作・区別できない状態に分けます。

コントラスト比は2色の相対的な明るさの差です。WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）のレベルAAでは、通常サイズの文字は背景と原則4.5:1以上、大きな文字は3:1以上が基準です。操作部品を識別するために必要な輪郭などの非テキスト情報は、隣接色と原則3:1以上を確認します。さらに、選択中などの意味を色の違いだけで伝えないことも重要です。

星空観察会の予約日一覧を修正前後で比べる

予約日と集合場所、残席、申込み操作を並べた画面を想定します。広い背景はクリーム色 ■#FFF4D9、各日程の面は白 ■#FFFFFF、見出しと通常の本文は濃い青灰色 ■#2C3536にします。HEX（#と6桁の英数字で色を表す形式）で指定した例です。本文と背景のコントラスト比は約11.50:1、本文と白い面では約12.58:1です。一方、クリーム色と白い面の差は約1.09:1しかありません。日程のまとまりには見出しと余白を使い、必要な輪郭を淡い面の差だけに任せません。

• 薄くて読めない補足文字：集合場所の文字をグレージュ ■#B1A18Cで背景のクリーム色 ■#FFF4D9に載せると約2.30:1です。背景はそのままに、文字を濃い茶色 ■#594A3Aへ変えると約7.79:1になります。小さな注記も必要な情報なら、薄さで重要度を下げすぎないようにします。
• 目立たない申込みボタン：淡いピンク ■#F6DBD6に白文字 ■#FFFFFFを載せた状態は約1.31:1で、文字が読みにくくなります。ボタンの背景だけを深いローズ ■#7D3848に変更すれば、白文字との比率は約8.30:1、周囲のクリーム色 ■#FFF4D9との比率も約7.58:1です。「参加を申し込む」という文言も残します。
• 選択日が分からない：選択した日を淡い黄色 ■#FFE5A8で塗るだけでは、通常背景のクリーム色 ■#FFF4D9と約1.13:1しか違いません。選択日の面に濃い茶色 ■#69502Cで太めの輪郭を付けると、輪郭と淡い黄色の比率は約6.11:1です。「選択中」の文字も併記し、色が分からなくても状態を確認できるようにします。

この例はパステル背景を残し、読ませる文字・押すボタン・選んだ日だけを強くしたものです。新しい配色を一から作るのではなく、どの問題を直すために変更したかを記録すると、後から不要な色を増やしにくくなります。

色を直した後は、操作と画面幅を変えて再確認する

修正の順番は、まず通常の文字と補足文字、次に申込みボタン、最後に日程の選択・操作中の表示です。日付を選ぶときは「選択中」の文字や輪郭だけでなく、キーボードで操作対象になったことを示すフォーカス表示も別に用意します。申込みできない日は「満席」などの文言を出し、薄くするだけで押せない状態を表現しないようにします。

スマートフォンでは日付や注記が狭い枠に収まるか、拡大するとボタンや選択中の表示が隠れないかを確かめましょう。文字を太くしただけで比率が改善したと判断せず、変更後の文字色と実際の背景色を組み合わせて測り直します。

HueRollでは色の候補や、選んだ色と白・黒のコントラストを確認できます。ただし任意の2色の比較やWCAGの自動合否判定には対応していません。ここで示した背景・文字・ボタン・輪郭の比率は別途計算したものです。