アクセシブル配色チェッカー

前景色と背景色を選ぶと、その組み合わせが Web Content Accessibility Guidelines (WCAG) のコントラスト要件 を満たすかをこのツールがチェックします — アクセシビリティ監査、Lighthouse、そしてほとんどの法律上のデジタルアクセシビリティ要件（ADA、EN 301 549、Section 508）で使われている基準です。

WCAG のカラーコントラストとは

WCAG 2.x は2つの公式を定義しています。1つ目は 相対輝度 — 人間の目が赤・緑・青をどう知覚するかを重み付けした、色の明るさ（線形化した sRGB チャンネルを用いた L = 0.2126×R + 0.7152×G + 0.0722×B）。2つ目は2色間の コントラスト比 — 明るい方の輝度を暗い方で割った (L1 + 0.05) / (L2 + 0.05) — で、1:1（同一の色）から21:1（純白の上の純黒）までの範囲を取ります。

WCAG は、弱視や色覚異常のある人にもテキストが読めるよう、最小比率を定めています:

• AA、通常テキスト: 4.5:1
• AA、大テキスト（18pt以上、または14pt以上で太字）: 3:1
• AAA、通常テキスト: 7:1
• AAA、大テキスト: 4.5:1

AA は多くのサイトが目標にする基準です — アクセシビリティ監査やほとんどの法的基準が求めるのはこれです。AAA はより厳しく、主に政府機関や高いアクセシビリティが求められる製品で重要になります。

使い方

1. 前景色（テキスト） を選びます — hex値を入力するか、ピッカーを使います。
2. 背景色 を選びます。
3. 結果テーブルは即座に更新され、正確なコントラスト比と、4つのしきい値すべて（AA/AAA × 通常/大）に対する合格・不合格バッジが表示されます。
4. ペアが通常テキストの AA に不合格の場合、ツールは 推奨アクセシブル前景色 も計算します — 同じ色相と彩度を保ったまま4.5:1を満たす、元の色に最も近い明度調整（暗くするか明るくするか、視覚的な変化が小さい方）です。

よくある質問

同じペアが大テキストでは合格するのに通常テキストでは不合格になるのはなぜ? 大きく太いテキストは低いコントラストでも読みやすいため、WCAG は18pt以上、または14pt以上の太字テキストの比率を3:1（AA）または4.5:1（AAA）に緩和します。

色覚異常はこれに影響しますか? コントラスト比は色の違いではなく輝度の計算なので、一般的な色覚異常に対してはかなり頑健です — ただし、情報が色相だけで伝えられていないかを確認することの代わりにはなりません（例:「赤 = エラー」にはアイコンやラベルも必要です）。

推奨される前景色が、入力した色相と違うのはなぜ? 色相と彩度は同じで、明度だけが変わります。元の色からの変化が最も小さい方向（黒に近づくか白に近づくか）で4.5:1に到達するのです。

AAA 準拠にしたい場合はどうすれば? 結果テーブルの AAA 行を確認してください。推奨色機能は現在、ほとんどの監査が使うしきい値である通常テキストの AA（4.5:1）を対象としています。AA を満たす色でも AAA は満たさないことがあります。

色データはどこかに送信されますか? いいえ — すべての計算はブラウザ内だけで実行されます。何もアップロードや保存はされません。