淡いグレーの文字がおしゃれだけど、スマホでは読みにくい。どう確認する？
文字のコントラスト
text contrast
文字と背景の明るさの差に関わる、読み取りやすさの指標です。色が違っていても、明るさが近い組み合わせでは文字が見分けにくくなります。
同じ白背景でも、文字の濃さで変わる
具体例
白い背景に薄いグレーで注意書きを置くと、読める人もいれば読み取りにくい人もいます。文字を濃くする、背景を変えるなどして差を確かめます。
確認する手順
- 本文やボタンなど、確認する文字の色と、そのすぐ後ろの背景色を調べます。
- コントラスト確認ツールに色を入力し、比率を確認します。WCAG 2.2の基準1.4.3では、通常の文字は4.5:1以上が基準です。
- 写真の上に文字を置く場合は、文字の背後が場所によって変わることを考え、無地の帯なども検討します。
- 実際の画面サイズでも、文字の大きさ・太さ・行間を含めて読み直します。数値だけで見やすさを決めません。
間違えやすいこと
「赤と緑だから違う色」という判断だけでは不十分です。また、比率が基準を満たしても、細すぎる文字や小さすぎる文字が読みやすくなるとは限りません。
公式資料で確かめる
画面や条件は変更されることがあります。お手元の製品・資料や契約書など、ご自身の条件に合う最新情報を確認してください。