コントラストチェッカー

文字色と背景色を入力するだけで、WCAGコントラスト比と、どのAAおよびAAAレベルに合格しているかを即座に判定します。

コントラスト比
通常のテキストAA4.5:1
通常のテキストAAA7:1
大きなテキストAA3:1
大きなテキストAAA4.5:1
UIとグラフィック3:1
チェックする文字色と背景色を入力してください。

すべてのチェック処理はお使いのブラウザ上で行われます。入力したデータがBroBroGoにアップロードされることはありません。

よくある質問

AAおよびAAAの判定結果は何を意味していますか?

AAは多くのWebサイトが目標とする標準的なレベルで、通常のテキストで4.5:1以上、大きなテキストで3:1以上の比率が必要です。AAAはさらに厳格なレベルで、通常のテキストで7:1以上、大きなテキストで4.5:1以上が求められます。コントラスト比は1:1(コントラストなし)から21:1(白背景に黒文字)までの範囲で表されます。

「大きなテキスト」とはどのようなサイズを指しますか?

18pt(約24px)以上、または太字(ボールド)の場合は14pt(約18.5px)以上のテキストを指します。大きなテキストはコントラストが低くても視認性を維持できるため、通常のテキストよりも緩い基準(AAは3:1以上、AAAは4.5:1以上)で合格判定となります。

どのカラーフォーマットを入力できますか?

「#1a1a1a」のようなHEX値、「rgb(26, 26, 26)」のようなRGB値、またはHSL値を入力するか、カラーパレットをクリックして色を選択できます。入れ替えボタンを使用すると、文字色と背景色を瞬時に入れ替えることができます。

このツールはWCAG 2と新しいAPCA方式のどちらを使用していますか?

本ツールは、現在のアクセシビリティ基準や監査で参照されているWCAG 2.1 / 2.2の計算式を採用しています。APCAはWCAG 3向けに策定中の、より人間の知覚に合わせた新しい手法ですが、まだ正式な準拠規格ではないため、ここでの判定結果には使用していません。