Color Contrast Checker

文字色と背景色の WCAG コントラスト比を計算。AA / AAA の合否を即判定。完全ブラウザ完結。

あア Aa 12 通常サイズのサンプルテキスト — sample text
21.00
コントラスト比 : 1

WCAG 判定

基準必要比判定

コントラスト比の計算

コントラスト比は 生の RGB やチャンネル平均ではなく「相対輝度」から計算します。 多くの自作チェッカーがここを間違えます。手順:

  1. 各チャンネルを 0〜1 に正規化
  2. sRGB ガンマを戻す (線形化): c≤0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4
  3. 相対輝度: L = 0.2126R + 0.7152G + 0.0722B (人間の目は緑に最も敏感)
  4. 比: (L明 + 0.05) / (L暗 + 0.05)

末尾の +0.05 は画面の環境光の反射をモデル化したもので、これにより 純黒/純白でも上限が 21:1 になります。閾値は通常テキスト AA 4.5 / AAA 7大きいテキスト (18pt 以上 or 14pt 太字) は AA 3 / AAA 4.5 と異なります。

計算ロジックは Node テスト 32 個でカバー。