カラーコントラスト
2色間のWCAG AA/AAAのコントラストをチェックします。
カラーコントラストブラウザ内で実行
文字色
背景色
Aa
サンプルテキスト
17.49
コントラスト比
AA ・ 通常テキスト (4.5:1)Pass
AA ・ 大きいテキスト (3:1)Pass
AAA ・ 通常テキスト (7:1)Pass
AAA ・ 大きいテキスト (4.5:1)Pass
すべてブラウザ内で実行され、入力内容はどこにもアップロードされません。
使い方
- 1文字色と背景色を、カラーピッカーまたはHEXコードで入力します。
- 2コントラスト比とサンプルテキストのプレビューを確認します。
- 3AA・AAA（通常テキスト／大きいテキスト）の合否を見て、必要なら色を調整します。
こんなときに
- ブランドカラーのボタンやリンクの文字が読みやすいかを確認したいとき。
- デザインレビューで、アクセシビリティ基準を満たしているかを数値で示したいとき。
よくある質問
WCAG AA ではどの比率が必要ですか？
通常テキストは4.5:1以上、大きいテキストは3:1以上です。AAA では通常テキストが7:1以上、大きいテキストが4.5:1以上です。
「大きいテキスト」とはどのサイズですか？
WCAG では18ポイント（約24px）以上、または太字の14ポイント（約18.66px）以上を指します。
どんな形式の色コードを入力できますか？
6桁または3桁のHEXコード（例：#17150F、#fff）です。RGBやHSLの値は、HEXに変換してから入力してください。
関連ツール
この作業を、運用の中で自動化する。
tixigen なら、SEO・メタ情報・多言語公開を一つの流れで管理できます。