文字と背景に、読み取れる明暗の差をつける。

05条件と補足

大きな文字は3:1以上

基準の定義に当てはまる大きな文字や、その文字画像は、3:1以上が必要です。

英字などのラテン文字の書体では18ポイント以上、又は14ポイント以上の太字が大きな文字に当たります。日本語・中国語・韓国語の書体ではそれと同等の大きさを確認します。日本語にラテン文字の数値をそのまま当てはめて、一律に判定することは避けます。使用する書体と、提供時にブラウザーが表示する大きさを確認してください。利用者が拡大した後の大きさは、この判定に含みません。

この教材では、大きな文字に当てはまるか判断が難しい場合も、4.5:1以上を確保する方法を勧めます。これは配色を決めるときの推奨であり、基準が定める3:1の条件を変えるものではありません。

コントラストの要件がない文字

次の文字・文字画像には、この基準のコントラスト要件がありません。

• 無効になっている部品の一部。例えば、入力が済むまで無効にしているボタンの文字。
• 情報や機能を持たない、純粋な飾り。
• 誰にも視覚的に見えないもの。
• 文字以外にも重要な視覚情報がある写真の一部分。例えば、街の写真に写り込んだ看板の文字。
• ロゴやブランド名の一部である文字。

写真の上に案内文を載せた場合、その案内文は写真に写り込んだ文字とは異なり、確認の対象です。また、ブランドの配色を使っているという理由だけで、通常の本文やボタンの文字が例外になるわけではありません。

測り方と数値の扱い

比率はブラウザーで使われる文字色と背景色から、WCAGの計算方法で求めます。見た目の印象だけで判断せず、コントラストを測るツールなどで確認します。文字の輪郭のぼかしによる薄い色ではなく、指定された色を用います。

計算結果を丸めて、基準を満たしたことにしてはいけません。例えば、4.499:1は4.5:1未満です。図に載せた約2.75:1などの値は表示用に丸めていますが、判定には丸める前の値を使っています。

ほかの基準との違い

文字の読みやすさを扱うこの基準と、色だけで意味を伝えない1.4.1は別々に確認します。ボタンの輪郭や、情報を伝える図形などのコントラストは主に1.4.11で扱います。1.4.6では通常の文字に7:1以上など、より高いコントラストを求めています。

この改善例はこの画面の締切とボタンの文字に関するものです。画面やサイト全体のWCAG適合を示すものではありません。