WCAG 2.2 カラーコントラストチェッカー
ブラウザー内でローカル実行テキストと UI の色のコントラストを WCAG 2.2 AA・AAA で確認し、不合格の組み合わせを修正
保存した色を復元しています…
WCAG 2.2 カラーコントラストチェッカーとは？
WCAG 2.2 カラーコントラストチェッカーは、前景色と背景色のコントラスト比を測定し、テキストの AA と AAA（達成基準 1.4.3 と 1.4.6）、UI コンポーネントとグラフィカルオブジェクト（達成基準 1.4.11）の合否を表示します。HEX、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color()、CSS 色名に対応し、組み合わせをテキストとコントロールでプレビューし、不合格の場合は最も近いアクセシブルな色を提案します。
使い方
- 1.前景色と背景色を入力または選択します。
- 2.コントラスト比と、WCAG 2.2 の各基準の合否行を確認します。
- 3.通常テキスト、大きなテキスト、コントロールのプレビューを確認します。
- 4.不合格の項目があれば「前景色を調整」または「背景色を調整」で AA か AAA を選び、元の色と提案の色を比べてから「適用」を選びます。
- 5.結果の要約または CSS 宣言をコピーします。
コントラスト比の計算方法
各色を sRGB に変換し、WCAG の式（線形化しきい値 0.04045）で相対輝度を計算します。比は (L1 + 0.05) / (L2 + 0.05) です。表示は小数点以下 2 桁に丸めますが、合否の判定はすべて丸める前の値で行うため、4.499:1 は 4.50:1 と表示されても AA に不合格です。半透明の前景色は背景色の上に、半透明の背景色は下地色（既定は白）の上に、ブラウザーと同じく sRGB のチャンネルごとに合成します。鮮やかな Display P3 や OKLCH など sRGB 外の色は、測定前に sRGB にクリップし、その旨を表示します。
制限とプライバシー
このチェッカーは 1 組の色を測定します。フォントのレンダリング、画像やグラデーション上のテキスト、その他の WCAG 基準は評価しません。ページ全体の監査には Web Accessibility Checker を使用してください。WCAG 2.2 の大きなテキストは 18 ポイント以上、または 14 ポイント以上の太字（約 24px、または太字 18.66px）です。色はブラウザー内で処理され、最後の組み合わせはこのブラウザーのローカルストレージにのみ保存されます。
