WCAG基準に基づくコントラスト比の計算
本ツールは、指定したテキスト色（前景色）と背景色の相対輝度からコントラスト比を計算する無料の検証ツールです。Webコンテンツのアクセシビリティ・ガイドライン（WCAG 2.1）の計算式を用いて、入力された2色の明度差を数値化します。
計算結果は「4.5:1」のような比率で表示され、この数値が大きいほど文字が読みやすいことを意味します。すべての処理はサーバーを介さずお使いのブラウザ上で完結するため、機密性の高い開発中のデザインデータでも安全にテストできます。
アクセシビリティ基準（AAとAAA）の違い
WCAGには複数の適合レベルがあり、一般的なWebサイトでは「レベルAA」の達成が目標とされます。レベルAAをクリアするには、通常のテキストで4.5:1以上、大きなテキストで3:1以上のコントラスト比が必要です。
さらに厳格な「レベルAAA」を目指す場合は、通常テキストで7:1以上、大きなテキストで4.5:1以上が求められます。ターゲットユーザーの年齢層や、公共性の高さに応じて適切な基準を選択し、配色の改善に役立ててください。
ツールを使用する際の注意点
このチェッカーは単一のカラーコード（ベタ塗り）同士の比較に特化しています。そのため、背景に画像を使用している場合や、グラデーションが適用されているテキストの判定には直接対応していません。そのようなケースでは、背景の中で最も文字が見えにくい（コントラストが低い）部分の色を抽出し、手動で入力して検証する必要があります。
また、フォントの太さやサイズは自動判定されないため、実際のデザイン上でテキストが「大きなテキスト」の定義（18pt以上、または14pt以上の太字）に当てはまるかどうかは、設計者自身で判断してください。
よくある質問
「大きなテキスト」とは具体的にどのくらいのサイズを指しますか？
WCAGの定義では、18pt（約24px）以上の標準ウェイト、または14pt（約18.5px）以上の太字（ボールド）が「大きなテキスト」に該当します。CSSのピクセル値に換算して、デザイン上のフォントサイズがこの基準を満たしているか確認してください。
テキストだけでなく、アイコンやUIコンポーネントのコントラストも確認できますか？
はい、入力欄にUI部品の色と背景色を指定することで確認可能です。WCAG 2.1では、非テキストコントラスト（アイコンや入力フォームの枠線など）に対して、レベルAAで「3:1」以上のコントラスト比が求められています。
半透明の色（RGBAなど）を使用した場合はどうなりますか？
半透明のテキスト色を指定した場合、背景色と合成された最終的な描画色を基に計算する必要があります。本ツールは不透明なカラーコードの比較を行うため、透過色を使用する際は、あらかじめ背景と合成した後の色を取得してから入力してください。
デバイスやモニターによる色の見え方の違いは考慮されますか？
本ツールは入力されたカラーコードの数値を基に、純粋な数学的計算（sRGB色空間）のみを行います。モニターごとのキャリブレーションの違いや環境光の影響などは考慮されないため、必要に応じて実機での視認性テストも併用することをおすすめします。
ツールの不具合や改善案はありますか。 フィードバックを送る