コントラストチェッカー
テキストの色と背景の色を選ぶと、正確なWCAGコントラスト比と、AA/AAAに合格するかどうかが表示されます。
--
大きいテキストのプレビュー(18pt以上)
通常テキストのプレビュー、本文でよく使われるサイズです。
バッジの意味
WCAG 2.1では、AA基準を満たすために通常テキストで4.5:1、大きいテキスト(18pt以上、または太字14pt以上)で3:1のコントラスト比が必要です。AAAはより厳しく、通常テキストで7:1、大きいテキストで4.5:1です。
よくある質問
AAとAAAの違いは何ですか?
AAはほとんどのサイトが目標とする基準値で、通常テキストは4.5:1、大きいテキスト(18pt以上、または太字14pt以上)は3:1です。AAAはより厳しく、弱視のユーザー向けのコンテンツを想定しており、通常テキスト7:1、大きいテキスト4.5:1です。
画像もチェックできますか、それとも単色だけですか?
単色同士(背景に対するテキスト色)のみです。写真やグラデーションの上のテキストの場合は、その上に乗り得る最も暗い部分と最も明るい部分の両方に対してコントラストを確認してください。
ブラウザや監査ツールと同じ計算式ですか?
はい。標準のWCAG 2.1相対輝度・コントラスト比の計算式で、Lighthouseやaxeでも使われているのと同じものです。