WCAGコントラスト計算 カラー・配色

前景色 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 (日本ウェブアクセシビリティ規格) 準拠
  • 官公庁・教育機関のサイト要件
  • デザインシステムのカラー設計

同カテゴリの関連ツール