WCAG コントラストチェッカー

用途

WCAG（ウェブアクセシビリティガイドライン）は、ロービジョン、色覚特性、ギラつく光環境のユーザーでもテキストを読めるよう、テキストと背景の最低コントラスト比を定義しています。本ツールは比率（1:1 = 同色、21:1 = 純黒×純白）を計算し、WCAG 2.1 の AA／AAA に通るかを通常テキスト、大きい文字、UI コンポーネントごとに判定します。計算は W3C の輝度公式に厳密に従います。

使うべきタイミング

• 白カードに乗せたブランドカラーがアクセシビリティを満たすか確認したいとき。
• ブランドカラー背景のボタンに対して、AA を満たす文字色を選びたいとき。
• デザインシステムのトークンを 1 つずつ監査して出荷前に揃えたいとき。
• 具体的な合否を提示してステークホルダーに色変更を提案したいとき。
• 低コントラスト設定のユーザーに実際にどう見えるか確認したいとき。

閾値

• 通常テキスト（18pt 未満／14pt 太字未満）：AA は 4.5:1、AAA は 7:1。
• 大きい文字（18pt 以上または 14pt 太字以上）：AA は 3:1、AAA は 4.5:1。
• UI コンポーネントとグラフィック（アイコン、フォーカスリング、フォーム枠、情報を伝えるグラフ要素）：AA は 3:1（WCAG 2.1 §1.4.11）。AAA 規定はありません。

よくある注意点

• 「大きい文字」は思ったより大きいです。 18pt はおよそ 24px、14pt 太字はおよそ 19px 太字。16px の本文は大きい文字ではありません。4.5:1 の閾値が必要です。
• 賑やかな写真の上の明るい文字は失格しがち。 コントラスト比は具体的なピクセル間で決まるため、暗いグラデーションを重ねるか、無地パネルで背景を整えてください。
• アンチエイリアシングはコントラストを弱めます。 4.5:1 は床であって目標ではありません。本文では 7:1 以上を狙うと読みやすくなります。
• ホバーとフォーカスも対象です。 静止状態で AA を通り、ホバー状態で落ちるなら、それは現実のアクセシビリティバグです。
• WCAG 2.1 と APCA。 WCAG 3 へ提案中の APCA は別の（おそらく改善された）数値を出しますが、ほとんどの法令で参照されるのは依然として WCAG 2.1 です。EN 301 549、ADA、AA 適合主張で使うのは本ツールの数値です。
• 透明度で誤魔化さないこと。 既知の背景に乗せたアルファ 50% の前景は実効コントラストが変わります。元の色ではなく、実際にレンダリングされる色で計算してください。