WCAG 1.4.3: コントラスト (最低限)
通常テキストは4.5:1以上、大きなテキスト（18ポイント以上、または太字で14ポイント以上）は3:1以上のコントラスト比を確保します。画像化された文字、プレースホルダー、グラデーションや写真上の文字も確認対象です。ロゴタイプ、装飾目的の文字、無効なUI部品などは対象外です。
意図的な失敗例: 文字と背景のコントラスト不足
薄いグレー文字で重要な説明を表示しています。
申請期限は本日17時です。
確認観点
- axeのcolor-contrast結果を確認し、検出された文字色と背景色の組み合わせを修正する
- 通常サイズのテキストは4.5:1以上、大きなテキストは3:1以上を満たすように調整する
- 画像化された文字、ボタン、ラベル、入力欄のプレースホルダーも確認する
- 必要に応じて文字色・背景色の変更、背景の半透明帯、ドロップシャドウなどで視認性を確保する
人の判断が必要な例
- ツールの数値で確認し、目視の感覚だけで判断していないか確認する
- ライトモードとダークモードの両方で基準を満たしているか確認する
- プレースホルダーに重要な説明を置かず、必要な説明は入力欄の外側に常時表示されているか確認する
補助ツール候補
- color-contrast
- text-contrast
生成メモ
- color-contrast（axe）はページ全体を自動網羅、text-contrast はその場の要素を目視で測る確認補助。結果が食い違う場合は、測定母集団と大きい文字判定の差を踏まえ、axeの網羅結果を基準に判断する