WCAGコントラスト計算 WEB制作
前景色 vs 背景色のコントラスト比を WCAG 2.1 基準で測定。AA / AAA 達成判定とリアルタイムプレビュー付き。
コントラスト比
-
最大: 21:1 (黒×白) / 最小: 1:1 (同じ色)
テキスト可読性プレビュー
WCAG 2.1 コントラスト基準
- レベル AA (推奨):
- 通常テキスト (18pt未満): 4.5:1 以上
- 大きいテキスト (18pt以上 or 14pt太字): 3:1 以上
- レベル AAA (理想):
- 通常テキスト: 7:1 以上
- 大きいテキスト: 4.5:1 以上
計算式
各色を相対輝度 (Relative Luminance) に変換し、比率を求めます。
- L = 0.2126×R' + 0.7152×G' + 0.0722×B' (R/G/Bはsrgb線形値)
- Contrast = (L₁ + 0.05) / (L₂ + 0.05) ※L₁が明るい方
典型的な用途
- Webサイトの可読性チェック (アクセシビリティ対応)
- JIS X 8341-3 (日本ウェブアクセシビリティ規格) 準拠
- 官公庁・教育機関のサイト要件
- デザインシステムのカラー設計