カラーコントラスト行列チェッカー

なぜ「すべての色の組み合わせ」を一度にチェックする必要があるのか？

WCAGのアクセシビリティガイドラインでは、テキストと背景色の間に一定以上のコントラスト比を確保することが求められています。これを満たさないと、視力の弱い方や色覚特性のあるユーザーがテキストを読みづらくなってしまいます。しかし実際のウェブサイトでは、複数のブランドカラー、背景色、ステータスカラーが組み合わさって使われることが多く——たとえば淡いグレーのカードの上にメインカラーの見出し、白地に警告色、色付き背景の上に濃色のテキストなど——1組ずつ手作業で確認していると、見落としや間違いが起きやすくなります。このツールでは、実際に使用しているすべての色を貼り付けるだけで、あらゆる組み合わせのコントラスト比を一括計算し、1枚のマトリクスとして表示します。もう1組ずつ確認する必要はありません。

コントラスト比の計算方法——具体的な例で見る

WCAG 2.1では、コントラスト比を (L1 + 0.05) / (L2 + 0.05) という式で定義しています。L1とL2はそれぞれの色の「相対輝度」で、値が大きいほど白に近いことを示します。例えば純黒 #000000 と純白 #FFFFFF の組み合わせは完璧な21:1ですが、淡いグレー #999999 と白の組み合わせはわずか2.85:1しかなく、通常テキストに必要な最低ライン4.5:1を大きく下回ります。通常テキスト（18px未満、または太字14px未満）はAA基準で4.5:1以上、より厳格なAAA基準では7:1以上が必要です。大きいテキスト（18px以上の太字、または24px以上）はやや緩やかな基準で、AAは3:1以上となります。

結果マトリクスの読み方

マトリクスの各セルは、その行の色と列の色の間のコントラスト比を表しており、緑（AAA合格）、黄（AAのみ合格）、赤（不合格）の色分けで表示されます。一目でどの組み合わせに問題があるかが分かるため、1つずつ手計算する必要はありません。

コントラスト比はあくまで各色のRGB値のみから算出されたものであり、実際の描画におけるフォントの太さ、アンチエイリアス処理、半透明の重なりなどは考慮されていません。公開前には必ず実機での目視確認も行うことをおすすめします。