小さな文字ほどコントラストが重要？WEBテキストの色を考える方法
WEBページの文字を小さくすると、同じグレーでも少し読みにくく感じることがあります。では、小さな文字には大きな文字より高いコントラスト比が必要なのでしょうか。WCAGの基準では、小さな文字だけの特別な数値があるわけではなく、通常サイズの文字と規定の大きな文字で基準が分かれています。ここでは架空の市民講座の申込み確認画面を例に、文字サイズと色を一緒に判断する方法を紹介します。
12～14pxの文字は通常文字の基準で確かめる
コントラスト比は、文字と背景の相対的な明るさの差を表す数値です。WCAG（WEBコンテンツを利用しやすくするための指針）のレベルAAでは、通常サイズの文字には4.5:1以上、規定の大きな文字には3:1以上が原則として求められます。大きな文字の目安は約24px以上の通常の太さ、または約19px以上の太字です。実際には書体や日本語の文字の大きさも考慮します。px（ピクセル）はWEBで文字の大きさを指定する単位です。
例えば13pxの説明文と16pxの本文は、どちらも通常サイズの文字として4.5:1以上を確認します。12pxにしたら基準が6:1へ上がる、という別の決まりはありません。ただし、小さな文字は線が細く見えたり文字の形を判別しにくくなったりするため、4.5:1を満たしても読めることが保証されるわけではありません。実際の書体・太さ・画面で確認し、必要なら文字を大きくします。
一方、24px程度の通常ウェイトの見出しは、大きな文字の条件に当てはまる場合に3:1以上で評価できます。同じ色でも、13pxの説明文では基準を満たさず、大きな見出しなら満たす例があります。文字色だけを見て「AA対応」と判断せず、どの大きさ・太さで使うかをセットで考えましょう。
白背景と淡い確認欄で、小さい文字の色を比較する
架空の市民講座の確認画面で、「開催日：10月22日」「集合場所：東館2階」「受付番号は当日ご提示ください」という案内を表示するとします。実在する講座や予約情報ではありません。色はHEX（「#」に続く0～9とA～Fの6桁で表すカラーコード）で示します。
案A：白背景で13～14pxの案内を表示する
- 背景を白#FFFFFF、基本の説明文を濃い青灰色#263746にすると、コントラスト比は約12.23:1です。
- 開催日や集合場所に添える短い13～14pxの説明には、落ち着いた青灰色#536575を選べます。白#FFFFFFとの比は約6.02:1で、通常文字の4.5:1を上回ります。
- もう少し淡い灰青色#788691は、白#FFFFFFと約3.74:1です。13pxの説明文には不足しますが、24px程度で規定の大きな文字に当たる見出しなら、数値上は3:1以上です。
さらに淡い灰青色#9EADB8は、白#FFFFFFと約2.30:1です。これは通常文字の4.5:1だけでなく、大きな文字の3:1にも届きません。意味のある説明には使わないようにします。大きさだけでなく、画面上で文字の形が見分けられるかも確認してください。
案B：淡い背景の確認欄に置き直す
講座の確認事項を淡い緑灰色#EEF4F2の欄にまとめた場合を考えます。基本の濃い青灰色#263746は、この背景#EEF4F2と約10.98:1、13～14px用の青灰色#536575は約5.41:1です。いずれも通常文字の4.5:1以上を確保します。
ところが淡い灰青色#788691は、確認欄の背景#EEF4F2では約3.36:1となり、白背景のときと同じく13pxの説明には不足します。色相が似ているかではなく、実際に文字が載る背景との組み合わせで判断します。
「会場案内を見る」をリンクにするなら、深い青#175B78に下線を付けます。淡い緑灰色#EEF4F2の上では約6.73:1、白#FFFFFFの上では約7.49:1です。リンクの役割も文字色だけで伝えず、下線を残します。
基準を満たした後は、拡大表示と実際の文字の形を確認する
小さな文字のコントラスト比が足りなければ、背景を明るくするか文字を濃くして再計算します。ただし数字を合わせるだけで終えず、13pxが読みにくければ14～16pxへ大きくすることも検討してください。「集合場所」「受付番号」のように行動に必要な情報は、小さく薄い文字だけに押し込まないことが大切です。
WCAGのレベルAAには、利用者が文字を200％まで拡大しても、原則として内容や機能が失われないようにする基準もあります。PCとスマートフォンで文字を拡大し、案内が途中で切れたり、項目名と値が重なったりしないか確認します。ズーム時に背景や文字色が切り替わる場合は、その新しい組み合わせのコントラストも再確認しましょう。
ここでの数値は不透明な単色同士の計算結果です。画像の上に文字を置く場合や、透明度で色を薄くする場合には、その場所に実際に表示される背景と比べる必要があります。小さな文字ほど大切なのは、単に色を濃くすることではなく、十分な明暗差と適切な文字サイズを両方確かめることです。