コントラストチェッカー

前景色と背景色を貼り付けるか（スクリーンショットから選択）、コントラスト比とWCAGレベルを確認できます。WCAG 2.1 AAはほとんどの法域で法的アクセシビリティの基準であり、AAAは重要なコンテンツに推奨されるより高い基準です。

基準値

• WCAG AA、通常テキスト： 4.5:1以上。
• WCAG AA、大テキスト（18pt以上、または14pt以上で太字）： 3:1以上。
• WCAG AAA、通常テキスト： 7:1以上。
• WCAG AAA、大テキスト： 4.5:1以上。
• 非テキストUIコンポーネント（ボタン、フォームの枠線など）： 3:1以上（WCAG 2.1以降）。

コントラストが重要な理由

コントラストの低いテキストは、弱視のユーザー（人口の約4％）、明るい日光の下でのユーザー、安価なモニターを使用するユーザー、そして加齢による視力低下（誰もがいつか経験します）にとって読みづらくなります。多くのデザインシステムは、デザイナーの調整された5Kディスプレイではエレガントに見えるため、グレーオングレーをデフォルトにしていますが、他の環境では読めなくなります。

WCAG AAに違反すると、米国（ADA Title III）、EU（EAA）、その他多くの法域で法的措置の対象となる可能性があります。安価な保険として、すべてのテキストと背景の組み合わせを出荷前にチェッカーで確認しましょう。

レポート内容

1. コントラスト比 数値で表示（例：4.71:1）。
2. 合格/不合格 各WCAGレベルとテキストサイズごとに表示。
3. 修正案： 合格する最も近い暗い前景色または明るい背景色を提案。
4. ライブプレビュー その色の組み合わせでサンプルテキストを表示。

色覚シミュレーターと併用

コントラストと色覚は異なるアクセシビリティの軸です。同じUIで色覚シミュレーターを実行して、色覚異常（CVD）のユーザーにも機能することを確認してください。