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

不透明な2色のコントラスト比を計算し、WCAG 2.2の文字に関するAA/AAA基準を確認します。

現在の対象範囲で、この言語に対応しているツールを表示しています。サイト内のすべてのツールがすべての言語に翻訳されているという意味ではありません。

HEXは3/4/6/8桁、RGBは0–255または百分率、HSLは色相0–360、彩度と明度0–100%です。カンマ区切りと0–1のアルファ値を使用してください。コントラストの確認では不透明な色のみ使用できます。

WCAG 2.2では、AAは通常の文字で4.5:1、大きな文字で3:1が必要です。AAAではそれぞれ7:1と4.5:1が必要です。大きな文字とは18pt以上、または太字で14pt以上です。判定には丸める前の比率を使用します。アクセシビリティ認証ではありません。

使い方

不透明な文字色と背景色を入力して計算します。実際の文字サイズに合わせて比率と各基準の結果を確認してください。

使用例

白#FFFFFFに黒#000000を使うと21:1、両方に同じ色を使うと1:1になります。

対応範囲と制限

WCAG 2.2では、AAは通常の文字で4.5:1、大きな文字で3:1が必要です。AAAではそれぞれ7:1と4.5:1が必要です。大きな文字とは18pt以上、または太字で14pt以上です。判定には丸め前の比率を使い、表示は小数点以下4桁に丸めます。W3C参照資料:Understanding SC 1.4.3、SC 1.4.6。

よくある質問

合格すればウェブサイト全体がWCAGに準拠していますか?

いいえ。確認するのは2色のコントラスト比だけです。フォント、画像、操作状態、その他のアクセシビリティ要件は別途確認する必要があります。

関連ツール