カラーコントラストチェッカー
WCAGの相対輝度の計算式に基づいて、前景色と背景色のコントラストをローカルで確認し、通常の本文と大きな文字について、それぞれAA/AAAのしきい値を判定できます。レポートのエクスポートにも対応しています。
ブラウザー内でローカル処理
このページは公開ディレクトリのチェックに合格しています。JavaScript を有効にすると、すべての機能を使用できます。
使用ガイド
カラーコントラストチェッカーの使い方
色の値は現在のブラウザー内で相対輝度とコントラスト比を計算するだけで、アップロードも保存もされません。
二つの色を入力
カラーピッカーを使用するか、#RRGGBB値を貼り付けて前景色と背景色を設定します。プレビューは同期して更新されます。
チェックのしきい値
チェックをクリックすると、通常の本文 AA、通常の本文 AAA、大きな文字 AA の合格状態をそれぞれ確認できます。
コピーのチェック記録
合格後はレポートをコピーするか、TXTをダウンロードして、色の値、比率、各しきい値の結果を記録できます。
制限事項と注意点
- 初回リリースでは、透明度を含まない#RGBまたは#RRGGBBのみ受け付けます。半透明色の場合は、実際の合成先の背景を先に決める必要があります。
- 4.5:1は通常の本文AAに適用され、3:1は大きな文字AAに適用されます。7:1は通常の本文AAAの参考しきい値です。文字サイズ、太さ、非テキストのコントラストも確認してください。
- このツールは単色の組み合わせ1組のみを計算し、グラデーション、画像、影、フォントのレンダリング、複雑な背景は再現しません。
よくある質問
4.5:1 とは何ですか？
これは、普通の本文テキストに対する WCAG の AA 最低コントラストしきい値です。大きな文字の本文に対する AA のしきい値は 3:1 です。
透明色を直接判定できないのはなぜですか？
透明な前景色または背景色の最終的な色は、合成の順序と下地に依存します。実際に表示される単色を先に確定するほうが確実です。
コントラスト比に合格すれば、必ずアクセシブルですか？
必ずしもそうとは限りません。文字サイズ、ウェイト、状態、フォーカス、非テキストコンポーネント、画像の背景、実際のデバイスでの表示結果も確認する必要があります。