視認性を確保するための最小コントラスト比
視覚的なコントラストを適切に確保することで、弱視や高齢者など、視力に制約のあるユーザーがテキストやUI要素を認識しやすくするためです。十分なコントラスト比を維持することで、様々な環境（明るい場所や古いディスプレイなど）でもコンテンツを読みやすくします。
該当するケース
Section titled “該当するケース”- 通常のテキストと背景色の組み合わせ
- 見出しやラベルなどの重要なテキスト
- アイコンやボタンなどのUI要素
- グラフやチャートのデータ表示
- フォームの入力フィールドとプレースホルダーテキスト
- ナビゲーション要素やリンクテキスト
関連するWCAG達成基準
Section titled “関連するWCAG達成基準”チェックリスト
Section titled “チェックリスト”- 通常のテキスト（24px未満、または18.67px未満の太字）が、背景色に対して4.5:1以上のコントラスト比を満たしていること
- 大きなテキスト（24px以上、または18.67px以上の太字）が、背景色に対して3:1以上のコントラスト比を満たしていること
- アイコンやボタンなどのUI要素が、背景色に対して十分なコントラスト比を満たしていること
- グラフやチャートのデータ表示が、背景色に対して十分なコントラスト比を満たしていること
- フォームの入力フィールドとプレースホルダーテキストが、十分なコントラスト比を満たしていること
- ナビゲーション要素やリンクテキストが、背景色に対して十分なコントラスト比を満たしていること
- コントラスト比は、テキストのサイズや太さによって異なる要件が適用されることを理解しましょう
- デザインの一貫性を保ちながら、コントラスト比を満たす配色を検討しましょう
- 背景画像やグラデーションを使用する場合は、テキストが読みやすい領域を確保しましょう
- 色覚特性の違いを考慮し、色だけでなく明度の差も重要であることを認識しましょう
チェック方法
Section titled “チェック方法”- ブラウザの開発者ツールのコントラストチェッカーを使用する
- コントラストチェックツール（例：WebAIM Contrast Checker）を使用する
- デザインツールのコントラストチェック機能を活用する
- 実際のデバイスで表示を確認し、様々な環境での視認性をテストする
- コードレビューで、色の値がWCAGの要件を満たしているか確認する
補足・注意点
Section titled “補足・注意点”- コントラスト比の計算には、テキストのサイズと太さが影響することを理解しましょう
- 装飾的なテキストや非アクティブなUI要素は、コントラスト比の要件から除外されます
- ロゴやブランド要素は、コントラスト比の要件から除外されます
- 背景画像やグラデーションを使用する場合は、テキストの可読性を確保するための対策が必要です
- コントラスト比は、色の組み合わせだけでなく、明度の差も重要であることを認識しましょう
- WCAGではテキストサイズの要件をpt単位（18pt/14pt）で定めています。これをpx単位に換算すると約24px/18.67pxに相当します
- ptは印刷用の単位で、pxは画面上のピクセル単位です。デバイスの解像度によって実際の表示サイズが異なるため、px単位での指定の場合は注意が必要です