サイト制作
文字のコントラスト比とは？WCAGの4.5対1・3対1の使い分け
2026-10-30
この記事には広告・アフィリエイトリンクが含まれます。
WCAG 2.2の達成基準1.4.3では、通常の文字は4.5対1以上、大きい文字は3対1以上が基準です。文字と背景の組み合わせを測り、大きい文字の定義と例外も確認。計算だけでなく実際の読みやすさも点検します。
文字と背景の組み合わせでコントラストを測る
淡い色でそろえたページはきれいでも、本文を読むために目を凝らすなら困ります。文字と背景の明るさの差を示すコントラストは、その確認に使える指標です。
大切なのは、文字の色だけを選ぶのではなく、背景との組み合わせで見ること。写真の上へ文字を置く場合は、置いた場所でも条件が変わります。
通常の文字は4.5対1、大きい文字は3対1
WCAG 2.2の達成基準1.4.3では、一般の文字などについて4.5対1以上、大きい文字について3対1以上という基準があります。ただし、ロゴや非アクティブな部品など例外もあり、ページのすべての色へ同じ数字を機械的に当てはめるものではありません。
『大きい文字』にも基準上の定義があります。目安は18ポイント以上、または14ポイント以上の太字で、日本語などでは同等のサイズを考慮します。見出しっぽく見えるから3対1でよい、と自分の印象だけで決めないようにしたいですね。
細い書体や写真の上の文字も確認
W3Cの解説は、細い書体などでは、名目上の比率を満たしても実際の描画が薄く感じられる場合に触れています。計算が通れば、誰も読みにくくならないという保証ではないんです。
私なら、色の測定と、スマホで本文を読む確認を両方行います。写真の背景、リンク、入力のヒントなども、本文と一緒に見直したいですね。
装飾の配色と読む文字の配色を分けて調整
淡い色を全部捨てる必要はありません。飾りの面と、読むための文字を分けて考えれば、雰囲気を保ちながら調整できます。
おしゃれなページを作ったつもりで、読む人へ努力を求めていたら本末転倒ですよね。最初に守りたいのは、伝えたい文章が無理なく読めることです。
