ブラウザ内ツール
WCAGコントラストチェッカー
「おしゃれだが読めない」配色は、見た目の感覚では気づきにくいものです。 文字色と背景色を入れると、WCAGが定める相対輝度の式からコントラスト比を計算し、AA・AAAそれぞれの基準を満たすか判定します。
Aa 見本テキスト
通常サイズの文字はこのくらいに見えます
コントラスト比
21.00 : 1
AA（通常文字・4.5:1以上）合格
AA（大きい文字・3:1以上）合格
AAA（通常文字・7:1以上）合格
AAA（大きい文字・4.5:1以上）合格
「大きい文字」はWCAGの定義で18pt（24px）以上、または太字14pt（約18.7px）以上を指します。計算はWCAG 2.xの相対輝度式に準拠。すべてこのブラウザ内で計算し、送信しません。
基準の読み方
- AA（4.5:1）：多くの規格・社内基準が最低ラインとして要求する水準。
- AAA（7:1）：より厳格な基準。ロービジョンの利用者への配慮を重視する場合に。
- 大きい文字は基準が緩む：18pt（24px）以上、または太字14pt（約18.7px）以上は、AA=3:1・AAA=4.5:1と1段階緩くなる。
- 白と黒の組み合わせが理論上の最大値21:1。ロゴやブランドカラーはここまで出ないのが普通。