文字が読みにくいときは？配色のコントラストを確認する手順

淡い色でまとめると可愛いけれど、文字まで薄いと読みづらくなることがあるよねー。配色は雰囲気と読みやすさを分けて確認してみよう。

図：不透明な単色の組み合わせを想定。数値だけでページ全体の適合は判定できない。

通常の文字は4.5:1が基準

WCAG 2.2の達成基準1.4.3では、通常の文字と背景に4.5:1以上、大きな文字には3:1以上のコントラスト比を求めているよ。大きな文字は18ポイント以上、または太字14ポイント以上が目安。CSS pxへ換算するとそれぞれ24px、約18.67pxになるよ。

ロゴなどには例外があるけれど、普通の本文へそのまま当てはめないようにしよう。これはWebのアクセシビリティ基準で、紙の印刷品質を保証する数値ではないよ。

まず確認する4組

• 本文の文字色と背景色。
• ボタンの文字色とボタンの背景色。
• 入力欄の説明や補足の文字色。
• 写真やグラデーションの上の文字。

背景が変わる場所は、単色の組み合わせだけ測っても十分ではないよ。写真の明るい部分に文字が重なる状態など、実際の見え方も確認しよう。

改善は文字色から試してみよう

例えば淡いピンクの背景を残したいなら、本文を濃い色にする方法があるよ。ブランドカラーを全部捨てる必要はないんだ。色を選び直したら、コントラストを測り直そう。

.notice {
  background: #ffe8ee;
  color: #202039;
}

これは組み合わせの作例だよ。この記述だけで、ページ全体がWCAG適合になるわけではないので注意してね。

数値を満たした後も読んでみる

小さすぎる文字、細すぎる書体、詰まった行間は、コントラストだけでは解決できないよ。実際の文章を入れて、スマホ表示や拡大表示でも読めるか確認しよう。

見出しを可変サイズにするなら、clamp()の記事も参考にしてね。

手元の色を計算してみよう

配色コントラストチェッカーで、文字色と背景色を入力して比率を確かめられるよ。3桁・6桁の不透明なHEXに対応している。判定は丸める前の値を使うので、画面上で4.50に見える境界付近も、実際の計算値が4.5未満なら未達として扱うよ。