カラーとデザイン
文字のコントラストチェック
不透明な2色のHEX値をWCAGの文字コントラスト基準と比較します。
端末内で処理
文字のコントラストのみを確認します。アクセシビリティ全体の監査ではありません。不透明な単色のみ対応し、透明度・グラデーション・画像は対象外です。
ここに答えが表示されます。
ヘルプと計算方法
WCAG 2.2の相対sRGB輝度を使い、(明るい方 + 0.05) ÷ (暗い方 + 0.05)で計算します。AAは通常文字4.5:1、大きな文字3:1、AAAはそれぞれ7:1、4.5:1です。大きな文字は18 pt (24 CSS px)以上、または太字14 pt (約18.67 CSS px)以上です。判定は表示用の丸め値ではなく、丸め前の比率を使います。
WCAG 2.2 · 1.4.3WCAG 2.2 · 1.4.6計算方法と信頼性計算例
この例を試すか、ご自身の値に変えて使ってみましょう。
- 文字色 (HEX)
- #000000
- 背景色 (HEX)
- #ffffff
結果
コントラスト比: 21:1; AA・通常文字: 適合; AA・大きな文字: 適合; AAA・通常文字: 適合; AAA・大きな文字: 適合