薄い文字、赤だけのエラー。Webの配色で確かめたい二つのこと

配色には、文字を背景から読み取れることと、意味を色だけに頼らず伝えることという二つの役割があります。コントラストの数値と、実際の画面での伝わり方を分けて見直すと、直す場所が具体的になります。

コントラストは、文字と背景の組み合わせで決まる

同じグレーの文字でも、白い背景と濃い背景では見え方が変わります。文字色だけを取り出して「読みやすい色」と決めることはできません。

W3CのWCAG 2.2・コントラストの解説では、レベルAAの基準として、通常の文字は背景との比が4.5対1以上、大きな文字は3対1以上と示されています。ロゴや非アクティブな部品などには例外があります。

ここでいう大きな文字は、単に見出しと名付けた文字ではありません。基準では18ポイント以上、または太字で14ポイント以上などの定義があります。小さい見出しへ大きな文字の基準をそのまま使わないよう、実際のサイズと太さを確認する必要があります。

コントラストの測定は、印象だけの判断を補ってくれます。ただし、数値だけで、すべての人がどんな環境でも読めると保証できるわけではありません。

前掲のW3Cの説明も、細い書体や文字の描画によって、設定上の色より薄く見える場合に触れています。実際の文字サイズで本文を読み、細い文字や写真上の文字も確認すると、測定値では見落としやすい問題に気付けます。

背景が写真やグラデーションなら、文字の背後の色は一様ではありません。背景を一か所だけ測るのではなく、読みにくくなる部分がないかを見ることが重要です。文字の下に一定の背景を置くなど、組み合わせを安定させる方法も考えられます。

文字が十分に見えていても、意味が色だけで分けられていれば別の問題が残ります。赤い枠だけで入力エラーを知らせたり、グラフの系列を赤と緑だけで区別したりする場面です。

W3CのUse of Colorの解説は、情報や操作、状態の違いを色だけで伝えないことを求めています。色の違いを読み取れなくても、同じ意味を知る経路が必要です。

次は、色と一緒に使う手掛かりの例です。色を一律になくす提案ではなく、情報を受け取る方法を増やす考え方です。

表が見切れる場合は横にスクロールできます

たとえば「赤い項目を直してください」より、「メールアドレスに@を含めてください」のほうが、対象と修正内容を伝えられます。

配色の見直しでは、初期画面だけでなく、エラー、選択中、キーボードでのフォーカスなど、操作後の状態を含めます。通常時に読めても、選択すると文字と背景が近い色になる場合があるためです。

ダークモードがあるなら、それぞれの配色で同じ内容を確かめます。色を反転しただけで読みやすくなるとは限らず、画像の上の文字や補足文も別々に見るとよいでしょう。

配色は、文字と背景のコントラストと、色以外の意味の手掛かりを分けて確認できます。本文、エラー、選択状態を実際の画面で見比べることから始めてみてください。

操作中の現在位置を示す方法は、キーボード操作とフォーカスの基本で説明しています。