色のコントラストチェッカー

前景色と背景色の WCAG コントラスト比を確認し、AA・AAA の合否を表示します。

前景色（テキスト）

背景色

サンプルテキスト — The quick brown fox

18.88:1コントラスト比（WCAG の計算式）

通常テキスト AA（≥ 4.5:1）合格

通常テキスト AAA（≥ 7:1）合格

大きいテキスト AA（≥ 3:1）合格

大きいテキスト AAA（≥ 4.5:1）合格

このツールが報告するのは、WCAG のコントラスト比の計算結果と 4 つのしきい値に対する合格／不合格だけです。「このページが WCAG に準拠している」ことを意味するものではありません。実際の準拠は、フォントサイズ、太さ、デザイン全体を個別に確認する必要があります。

類似ツール：CSS とデザイン

コードを見栄えのよい共有用画像に変換。複数のテーマに対応

線形・放射状・円錐グラデーションを視覚的にデザインし、CSS コードをすぐにコピー

まだコメントはありません。最初のコメントを書いてみましょう！

色のコントラストチェッカーは、WCAG の計算式で前景色と背景色のコントラスト比を計算し、通常テキストと大きいテキストの AA／AAA の合格状況を表示します。

AA に合格すれば、私のページは WCAG に準拠していることになりますか？

必ずしもそうではありません。このツールが報告するのは、コントラスト比の計算結果と 4 つのしきい値に対する合格／不合格だけです。実際の WCAG 準拠は、フォントサイズ、太さ、デザイン全体にも左右されます。

なぜ合格／不合格を色だけで表示しないのですか？

色だけ（緑の点や赤の点など）では色覚特性のあるユーザーが判別できないため、すべてのしきい値でアイコンとテキストラベル（Pass／Fail）を必ず併記しています。

背景色が半透明の場合はどう計算されますか？

透明な背景には、不透明な「キャンバス背景」色を追加で指定する必要があります。ツールは既存の合成ロジックを使って合成後の不透明色を求め、それからコントラストを計算します。