WCAGコントラストチェッカー

WCAG（Web Content Accessibility Guidelines）2.1は、W3Cが策定するWebアクセシビリティの国際標準ガイドラインです。テキストと背景色のコントラスト比について、以下の基準を定めています。

• AA 通常テキスト：コントラスト比 4.5:1 以上（18pt未満の通常テキスト）
• AA 大きなテキスト：コントラスト比 3:1 以上（18pt以上、または14pt太字以上）
• AAA 通常テキスト：コントラスト比 7:1 以上（最も厳格な基準）
• AAA 大きなテキスト：コントラスト比 4.5:1 以上
• AA 非テキスト/UIコンポーネント：コントラスト比 3:1 以上（ボタン、アイコン等）

日本でも2024年4月から改正障害者差別解消法により、Webアクセシビリティ対応の重要性が高まっています。このツールを使えば、デザイン段階でWCAG基準を満たしているか即座に確認できます。

WCAG 2.1で定められたコントラスト比は、2色の相対輝度（Relative Luminance）から計算されます。

1. 相対輝度の算出

各色のRGB値（0〜255）を0〜1の範囲に正規化した後、ガンマ補正を逆適用します。sRGB値が0.03928以下の場合はV/12.92、それ以上の場合は((V+0.055)/1.055)^2.4で線形化します。得られたR, G, Bの線形値に対してL = 0.2126×R + 0.7152×G + 0.0722×Bで相対輝度を求めます。

2. コントラスト比の算出

2色の相対輝度L1（明るい方）とL2（暗い方）から、CR = (L1 + 0.05) / (L2 + 0.05)で計算します。結果は1:1（同色）から21:1（黒と白）の範囲になります。

本ツールではこの計算をリアルタイムで実行し、WCAG各レベルの適合を即座に判定します。

WCAGコントラスト基準を満たすだけでなく、より多くのユーザーに使いやすいデザインを実現するためのポイントを紹介します。

• 色だけに依存しない：エラー表示を赤色だけで示すのではなく、アイコンやテキストラベルも併用しましょう。色覚特性を持つユーザーにも情報が伝わります。
• テキストサイズを考慮する：16px以上の本文テキストはAA基準（4.5:1）、24px以上の見出しはAA大文字基準（3:1）が目安です。小さなテキストほど高いコントラストが必要です。
• AAA基準を目標にする：AA基準は最低限です。可能であればAAA基準（7:1）を目指すことで、高齢者やロービジョンのユーザーにも快適なデザインになります。
• プレースホルダーテキスト：input要素のプレースホルダーもコントラスト基準を意識しましょう。薄いグレーは読みにくいことがあります。
• ダークモード対応：ダークモードでも同様にコントラスト比をチェックしましょう。白背景で合格でも暗い背景では不合格になることがあります。