カラーコントラストチェッカー
WCAG 2.1のAA/AAAレベルに適合しているか確認できます
コントラスト比
17.40:1
WCAG 2.1 適合チェック
AA - 通常テキスト（4.5:1）合格
AA - 大きいテキスト（3:1）合格
AAA - 通常テキスト（7:1）合格
AAA - 大きいテキスト（4.5:1）合格
見出しサンプル (24px)
本文テキストサンプル。このツールでコントラスト比を確認できます。(16px)
小さなテキストサンプル。フォントサイズが小さいほど高いコントラストが必要です。(14px)
カラーコントラストチェッカーとは
Webアクセシビリティの国際標準であるWCAG（Web Content Accessibility Guidelines）2.1に基づき、前景色と背景色のコントラスト比を計算するツールです。視覚障害のある方を含む多くのユーザーが読みやすいWebページを作成するために活用できます。
よくある質問
WCAG AAとAAAの違いは？
AAは最低限のアクセシビリティ基準（通常テキスト4.5:1、大きいテキスト3:1）、AAAはより高い基準（通常テキスト7:1、大きいテキスト4.5:1）です。一般的にAAの達成が推奨されます。
「大きいテキスト」の定義は？
WCAG 2.1では18pt（約24px）以上の通常テキスト、または14pt（約18.67px）以上の太字テキストを「大きいテキスト」と定義しています。
コントラスト比はどうやって計算されますか？
WCAG式の相対輝度（luminance）を計算し、（明るい輝度 + 0.05）÷（暗い輝度 + 0.05）で求めます。最大値は21:1（黒と白の組み合わせ）です。
コントラスト不足の場合どうすればよいですか？
前景色を暗く、または背景色を明るくすることでコントラストを上げられます。デザインの雰囲気を保ちながら微調整し、必要な比率を満たすカラーを探してみてください。