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

色のコントラストチェッカーは、テキストの色と背景色のコントラスト比を測定し、WCAGアクセシビリティ基準を満たしているかどうかを判定するツールです。1:1から21:1の比率を算出し、通常テキストと大きなテキストそれぞれについてAAおよびAAAの合否を表示します。

使い方

WCAGの相対輝度計算式を使用しているため、WebAIMチェッカーやほとんどのアクセシビリティ監査ツールと同じ数値が得られます。処理はすべてブラウザ内で完結し、入力した色が外部にアップロードされることはなく、使用制限もありません。

コントラストチェッカーは無料ですか？

はい、完全無料です。サインアップ不要で使用制限もなく、すべてブラウザ内で動作します。

WCAG AAに必要なコントラスト比はどれくらいですか？

WCAG 2.1 レベルAAでは、通常テキストに4.5:1以上、大きなテキストに3:1以上のコントラスト比が必要です。レベルAAAでは通常テキストに7:1以上、大きなテキストに4.5:1以上が求められます。

「大きなテキスト」の基準は何ですか？

大きなテキストとは、通常ウェイトで18pt（約24px）以上、または太字で14pt（約18.66px）以上のテキストを指します。文字が大きければ読みやすくなるため、コントラスト比の基準が低めに設定されています。

コントラスト比はどのように計算されますか？

計算式は (L1 + 0.05) / (L2 + 0.05) です。L1とL2はそれぞれ明るい色と暗い色の相対輝度で、WCAG 2.x の定義に従いsRGBのR・G・Bチャンネルから算出します。

hex、RGB、カラー名に対応していますか？

はい。3桁・4桁・6桁・8桁のhex、rgb()・rgba()の値、「teal」などのCSSカラー名を入力できます。カラースウォッチでの選択も可能です。

同じ比率でも合格・不合格が変わるのはなぜですか？

必要なコントラスト比は、テキストのサイズと対象レベルによって異なります。3.5:1という比率は通常テキストのAAでは不合格でも、大きなテキストのAAでは合格します。実際に使用するサイズとレベルに合わせて確認してください。