👁️ カラーコントラストチェッカー

カラーコントラストチェッカーについて

このカラーコントラストチェッカーは、すべてブラウザ内で完結します。前景（テキスト）色と背景色を選ぶと、ツールがWCAGコントラスト比を計算し、その組み合わせが通常テキストと大文字テキストの両方でAAおよびAAAレベルをパスするかを教えてくれます。サーバーへのアップロードは一切なく、JavaScriptでローカルに計算されます。

WCAG適合レベル

• AA 通常テキスト —— コントラスト比 4.5:1 以上が必要。
• AA 大文字テキスト —— 18pt（24px）以上、または14pt（18.66px）太字。3:1 が必要。
• AAA 通常テキスト —— コントラスト比 7:1 以上が必要。
• AAA 大文字テキスト —— コントラスト比 4.5:1 以上が必要。

コントラストの計算方法

1. 各色をsRGBから線形RGB値に変換（ガンマデコード）。
2. 相対輝度を計算：L = 0.2126·R + 0.7152·G + 0.0722·B。
3. コントラスト比 = (L1 + 0.05) / (L2 + 0.05)。L1 は明るい方。

使い方

1. 前景色ピッカーでテキスト色を選びます。
2. 背景色ピッカーで背景色を選びます。
3. コントラスト比とWCAGの合格/不合格バッジを読みます。
4. 希望の適合レベルに達するまでどちらかの色を調整します。

よくある質問

色はアップロードされますか？ いいえ。すべての計算はローカルブラウザで行われます。

「大文字テキスト」とは？ WCAGでは、大文字テキストは18pt（24px）以上の通常、または14pt（18.66px）以上の太字です。

完全なWCAG準拠を検証しますか？ 色のコントラストのみをチェックします。完全なWCAG準拠には他にも多くの基準（テキストサイズ変更、フォーカスインジケータなど）が含まれます。

非テキスト要素は対象ですか？ 非テキストUIコンポーネント（アイコン・境界線）の場合、WCAGは隣接色に対して 3:1 を要求します。このツールでもチェックできます。