ホームページの配色は、文字を読めることと操作の意味が伝わることを軸に決めます。この記事では、背景や文字、ボタンの色の役割、コントラストの基準、色以外で情報を示す方法、写真に文字を重ねる際の点検を解説します。
ホームページの配色では、本文を読めることと、リンクや入力エラーの意味が伝わることを確保します。ブランドカラーは、その上で背景、文字、操作に役割を持たせて使います。青なら信頼、赤なら売上増加という色と成果の対応を、すべての事業へ当てはめる根拠にはできません。
料金や営業時間を掲載するページなら、淡い背景に淡い文字を置くより、文字と背景の明るさの差を計測して選びましょう。配色の検討は、訪問者が必要な説明を読んで操作できるかという具体的な課題から始めます。
コントラスト比は、文字と背景の相対的な明るさの差を表します。WCAG 2.2のレベルAAでは、通常の文字に 4.5対1以上、大きな文字に3対1以上を求めています。大きな文字は原則18ポイント以上、太字は14ポイント以上で、日本語などでは同等の大きさを判断します。ロゴや非活性の操作部品などには例外があります。（W3Cの文字コントラスト）
写真の明るい部分と暗い部分では、同じ文字色でも差が変わります。見出しの背後へ単色の背景を置く、写真と文章を別の領域にするなど、掲載した状態で文字を判読できる配置を選びます。画像の切り抜き位置が変わるスマートフォンでも点検が必要です。
背景色、本文色、リンクや主要な操作の色を記録し、同じ用途では同じ設定を使います。色数を3つにする方法は制作上の出発点として使えますが、必要な状態表示も含めて設計します。
| 用途 | 決めること |
|---|---|
| 本文と背景 | 実際の文字色と背景色の組み合わせ |
| リンク | 色に加える下線などの識別方法 |
| 主な操作 | ボタンの背景、文字、フォーカス表示 |
| 入力エラー | 問題の説明文と入力欄の表示 |
入力欄を赤くするだけでは、問題の内容が伝わりません。メールアドレスの形式を修正してくださいと文字で示す方法なら、色の識別に加えて修正内容を伝えられます。WCAGは、情報や操作を示す唯一の視覚的な手段として色を使わないことを求めています。（W3Cの色の使用）
料金、補足文、リンク、ボタンを掲載し、通常時とフォーカス時の見え方を点検します。文字が背景へ埋もれる箇所は組み合わせを変更し、色だけの説明は文字や形で補います。操作そのものの設計は ボタンの文言と操作範囲 も参照してください。
テンプレートを使う制作でも、実際に追加する写真や原稿の長さによって見え方が変わります。公開する内容を入れてから確認する工程を予定しましょう。
SpreadSite は、Googleスプレッドシートで内容を管理し、テンプレートを使ってホームページを作成・公開・更新できるノーコードツールです。
配色と掲載内容を点検しながら進めるホームページづくりに、ぜひ使ってみてください！
A: 3色は役割を決める制作上の目安です。文字、リンク、操作、エラーの表示を識別できる組み合わせを選びます。
A: 通常の本文やボタンの文字は、ブランドカラーでも背景とのコントラストを評価します。ロゴ文字の例外を本文へ広げないことが必要です。
A: 採用の判断には、ボタンの識別、文言、送信完了の計測が必要です。色だけから問い合わせの増加を推定できる材料はありません。
A: 写真の明るさと切り抜き位置で文字との差が変わります。実際の背景で測り、単色の領域を加えるなどの修正を行います。
