カラーアクセシビリティチェッカー
前景色と背景色（16進コード）を入力して、コントラスト比とWCAG準拠を確認してください。
これは大きな太字のテキストです。
これは通常サイズのテキストです。
21.00:1
コントラスト比
通常のテキスト (AA)
大きなテキスト (AA)
18pt+ or 14pt+ bold
UIコンポーネント (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
カラーアクセシビリティチェッカー の使い方
- 1
2色を入力する
前景色(テキスト色)と背景色を、たとえば #1a1a1a と #ffffff のように hex コードで指定します。
- 2
コントラストをチェックする
「Check Accessibility」をクリックして、2色間のコントラスト比を計算します。
- 3
WCAG の結果を確認する
通常テキスト、大きいテキスト、UI コンポーネントの各レベルで AA と AAA の合否バッジを確認し、ライブプレビューを見ます。
- 4
必要に応じて調整する
色を入れ替えたり hex 値を微調整したりして、プロジェクトが求める WCAG レベルを満たす組み合わせにします。
よくある質問
コントラスト比とは何で、どのくらいが良いとされますか?
AA と AAA の違いは何ですか?
通常テキストは不合格なのに、大きいテキストが合格になるのはなぜですか?
どの色形式で入力すればよいですか?
チェッカーは無料ですか?入力した色はどこかに送信されますか?
関連ツール
こちらの便利なツールもどうぞ