色のコントラストを確認するタイミングはいつ？WEB制作のチェック手順

WEBサイトのコントラストは、公開直前に一度チェックすればよいのでしょうか。実際には、配色案を選ぶ段階、CSSで画面を作る段階、公開前の操作確認、公開後の色変更時に確かめると手戻りを減らせます。コントラスト比とは、文字や操作部品と隣接する背景との明るさの差を示す数値です。ここではセミナー申込みフォームを例に、いつ・何を・どの順番で確認するかを説明します。

最初の確認は配色案を決めるとき

まず、背景・本文・補足文・ボタン・入力欄の境界線のように、色を使う場所と役割を整理します。背景色と文字色を別々に選んでからではなく、実際に接する組み合わせで測定することが重要です。WCAG 2.2（WEBコンテンツを利用しやすくするための国際的なガイドライン）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラストが原則必要です。大きな文字かどうかは文字サイズや太さで判断し、見出しというだけで3:1に緩めないようにします。

操作に必要な入力欄の輪郭や、状態を示すアイコンなどの非テキスト表示は、隣接色との3:1以上が基準です。ただし飾りの線すべてに一律で適用されるものではありません。まず文字の組み合わせを決め、次に意味や操作に必要な境界を確かめると確認漏れを減らせます。

例えば白■#FFFFFFに薄いグレー■#94A3B8の補足文字を置くと約2.56:1で、通常文字の基準に届きません。濃いグレー■#475569なら約7.58:1です。最初の配色案でこうした候補を比較しておけば、制作後に全ページの補足文字を修正する事態を避けやすくなります。

実装中は通常表示と操作中の色を別々に測る

セミナーの申込みページで、白いフォームに説明文、補足文、入力欄、確認ボタンを配置するとします。本文文字は濃い青灰色■#334155、補足文は少し弱い■#475569、入力欄の枠線はグレー■#64748Bにします。ボタン背景は青■#1D4ED8、ボタン文字は白■#FFFFFFです。ホバー（マウスを載せた状態）には濃い青■#1E40AF、フォーカス（キーボードなどで操作対象になった状態）には青い外枠を用意します。

<section class="contrast-check">
  <h3>セミナーに申し込む</h3>
  <p>参加方法と日時を確認して申し込めます。</p>
  <p class="contrast-check__note">申込み前に連絡先をご確認ください。</p>
  <label for="signup-email">メールアドレス</label>
  <input id="signup-email" type="email" required>
  <button type="button">申込み内容を確認</button>
</section>

.contrast-check {
  max-width: 34rem;
  padding: 24px;
  background-color: ■#FFFFFF;
  color: ■#334155;
}
.contrast-check__note { color: ■#475569; }
.contrast-check label {
  display: block;
  margin: 14px 0 6px;
}
.contrast-check input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 2px solid ■#64748B;
  border-radius: 6px;
  background-color: ■#FFFFFF;
  color: ■#334155;
}
.contrast-check button {
  margin-top: 16px;
  padding: 12px 18px;
  border: 0;
  border-radius: 6px;
  background-color: ■#1D4ED8;
  color: ■#FFFFFF;
}
.contrast-check button:hover {
  background-color: ■#1E40AF;
}
.contrast-check :is(input, button):focus-visible {
  outline: 3px solid ■#1D4ED8;
  outline-offset: 3px;
}

文字と白背景の比率は、本文が約10.35:1、補足文が約7.58:1です。白文字と青いボタンは約6.70:1、ホバー時は約8.72:1で、通常文字の4.5:1を上回ります。入力欄のグレー枠線と白背景は約4.76:1、フォーカス枠線の青と白背景は約6.70:1で、必要な非テキスト表示の3:1も上回ります。対して、薄い枠線■#CBD5E1では白背景と約1.48:1しかなく、枠線だけが入力欄の存在を示す設計には不向きです。

これは色と見た目を確かめるための例で、フォームの送信・入力エラー処理は実装していません。実際のサイトでエラー表示や無効状態があるなら、その画面を表示したうえで文字・図形・隣接色をそれぞれ確認します。状態を色の変化だけで伝えず、説明文や形も用意しましょう。

公開前と公開後は表示条件・変更箇所を確認する

公開前には、まず代表的なページをPCとスマートフォンで開き、通常表示だけでなくホバー、キーボードのフォーカス、入力エラー、選択中の状態を操作します。背景写真・グラデーション・半透明の色を使う場所は、カラーコードだけでは完成時の背景色が決まりません。文字を置く位置で実際の重なりを確認してください。ライト・ダークの両方に対応するなら、各モードも別々に測ります。

測定結果は「画面名・要素・前景色・背景色・状態・比率・判定」の形で記録すると、修正後に同じ場所を測り直せます。4.5:1や3:1に届いているかは、丸める前の値で判断します。自動チェックだけでは、写真の上の文字や操作後に現れる表示を見落とすことがあるため、目視と実操作も組み合わせます。

公開後も、ブランドカラーを変更したとき、CSS変数を更新したとき、バナー写真を差し替えたとき、フォームやボタンの状態を追加したときは、影響する組み合わせを再確認します。HueRollは選択色と白・黒のコントラストを表示できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。基準色の検討に利用し、完成したUIの色同士の比率は別の検証手段で確かめましょう。