やさしい印象のWEBサイトを作る配色｜淡色と文字色の組み合わせ

WEBサイトをやさしい印象にしたくて、背景も文字も薄い色でそろえると、説明や申込みボタンが見つけにくくなることがあります。淡色を活かすには、広い面の色を穏やかにしつつ、文字と操作には十分な明暗差を付けることが大切です。花の教室の体験申込みページを例に、背景・文字・ボタンの組み合わせを考えます。

やさしさは淡い背景で作り、文字は必要以上に薄くしない

淡色とは、ここでは明るく鮮やかさを抑えた色を指します。明度は色の明るさ、彩度は鮮やかさのことです。淡いピンクやクリームを大きな背景に使うと、柔らかい雰囲気を目指せます。ただし、その上の文字まで淡くすると、背景と文字の明るさが近づいてしまいます。

まずページ背景、案内を載せる面、見出しと本文、申込みボタンの役割を分けます。見出しには深い色、補足文には少し抑えた色を使いながら、どちらも実際の背景と組み合わせて確認します。やさしい雰囲気を保つために文字を読みにくくする必要はありません。

淡いピンクとクリームを使う花の教室の配色例

季節の花を学ぶ架空の教室の体験申込みページを想定します。HEX（ヘックス）は赤・緑・青の成分を16進数で表す色コードです。淡い背景を広く使い、濃いモーブ（紫みを帯びた落ち着いた色）を主要な操作にだけ置く配色です。

見出し文字■#40333Cとピンクの案内帯■#F9E7E5のコントラスト比は約10.01:1、本文文字■#4B3A42とクリームのページ背景■#FFF9F5は約10.15:1です。小さな補足文字■#66545Eは、案内帯との組み合わせで約5.87:1、白いカード■#FFFFFFの上では約7.01:1になります。

申込みボタンの白文字■#FFFFFFと濃い背景■#805565は約6.17:1、ボタンの背景とピンクの案内帯との比は約5.17:1です。セージの補足ボックス■#E5EEE8に本文文字■#4B3A42を載せた場合も約8.94:1となります。いずれも指定した不透明な2色の計算値です。

薄い補足文字と操作部品は背景ごとに見直す

例えば補足文字を淡いグレー寄りのピンク■#B4A0A6にすると、案内帯■#F9E7E5とのコントラスト比は約2.06:1に下がります。見た目が柔らかくても、通常サイズの文字に求められる4.5:1には届きません。補足文字は表の濃さを基準にし、文字サイズも含めて検討します。

WCAG（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が基準です。また、入力欄を見分けるために必要な輪郭などの視覚情報は、隣接色と原則3:1以上が求められます。表の輪郭色■#846674は、白い入力面■#FFFFFFと約5.08:1、クリームの外側■#FFF9F5と約4.87:1です。

淡いカードとページ背景は色差が小さいため、余白や見出しでも区切ります。ボタンのホバー（ポインターを重ねた状態）やフォーカス（キーボードなどで操作対象になった状態）、スマートフォン表示も別に確認しましょう。色だけで操作状態を伝えず、輪郭や文言も併用します。やさしい印象は淡色の面積で作り、文字や操作の分かりやすさは保つことがポイントです。