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

> 無料のWCAGコントラストチェッカー。テキスト色と背景色を入力するとコントラスト比が表示され、通常テキストと大きなテキストのAA/AAA合否がわかります。

テキスト色と背景色を入力すると、WCAGコントラスト比と、通常テキスト・大きなテキストのAA/AAA合否がすぐに表示されます。ライブプレビュー付きです。

*Interactive tool: enter your values at https://toollantern.win/ja/kontorasuto-chekku/ and results update instantly in your browser.*

## このツールでできること

チェッカーは、テキスト色と背景色のWCAGコントラスト比を計算し、WCAG 2.xの4つの閾値（通常テキストと大きなテキストそれぞれのAA・AAAレベル）で合否を判定します。ライブプレビューでは、両方のサイズの実際のテキストとして色を確認できます。

## 輝度の公式

まず各色の**相対輝度**を計算します。各RGBチャンネルを線形化し（0.03928以下の値は12.92で割り、それより大きい値は((v＋0.055)÷1.055)の2.4乗を使います）、L＝0.2126×R＋0.7152×G＋0.0722×Bとして合成します。係数は人間の目が緑の光に最も敏感であることを反映しています。

**コントラスト比**は（L1＋0.05）÷（L2＋0.05）で、L1は明るい方の色の輝度です。1:1（同一色）から21:1（白地に黒）までの範囲です。

## 計算例

青背景**#3B82F6**に対する白テキスト**#FFFFFF**のコントラスト比は約**3.7:1**です。大きなテキストのAA（3:1必要）には合格しますが、通常テキストのAA（4.5:1必要）には不合格です。見出しには十分ですが、本文には不向きです。

## 4つの閾値

- **AA 通常テキスト：**4.5:1。多くの法規制が求める法的な基準ラインです。

- **AA 大きなテキスト：**3:1。大きなテキストとは18pt以上、または太字で14pt以上です。

- **AAA 通常テキスト：**7:1。最も厳しいレベルです。

- **AAA 大きなテキスト：**4.5:1。

## 注意点

この比率は輝度コントラストのみを測定します。フォントのレンダリング、細いストローク、画像上の透明度、輝度以外の色覚の違いは考慮されません。

## よくある質問
### 良いコントラスト比とは？

通常テキストは少なくとも4.5:1（WCAG AA）を目指しましょう。これは多くのアクセシビリティ法の基準です。7:1でより厳しいAAAレベルになります。大きな見出しは3:1でAAに合格します。

### WCAGで大きなテキストとは？

18pt（24px）以上、または太字で14pt（約19px）以上のテキストです。それより小さいものは通常テキストの閾値が適用されます。

### AAとAAAの違いは？

AAはほとんどの法規制が求める標準的な適合レベルです。AAAはより厳しく、可能な限り推奨されます。特に全員が読む本文テキストでは重要です。

### ダークモードにも使えますか？

はい。明るいテキスト色をテキスト色に、暗い面を背景色に入力してください。計算は方向に依存しないため、2色を入れ替えても比率は同じです。

### ブランドカラーが白背景で不合格になるのはなぜですか？

多くのブランドカラーは白背景で4.5:1に届くには明るすぎます。大きな見出しやグラフィックのアクセント（3:1で十分）に使い、本文には暗めのバリエーションを選びましょう。

---
Interactive version: https://toollantern.win/ja/kontorasuto-chekku/