Aa あいう サンプル
21.00:1
| 基準 | 必要比率 | 判定 |
|---|---|---|
| AA 通常テキスト | 4.5:1 | PASS |
| AA 大きい文字（18pt / 14pt bold 以上） | 3:1 | PASS |
| AAA 通常テキスト | 7:1 | PASS |
| AAA 大きい文字 | 4.5:1 | PASS |
| AA UI部品 / グラフィック | 3:1 | PASS |
コントラスト比チェッカーでできること
前景色（テキストの色）と背景色を入力すると、WCAG 2.x公式式に基づいてコントラスト比を算出します。AA通常テキスト（4.5:1）・AA大きい文字（3:1）・AAA通常テキスト（7:1）・AAA大きい文字（4.5:1）・AA UI部品（3:1）の5つの基準について合否を一覧表示します。カラーピッカーとHEX入力の両方に対応し、プレビューで実際の見た目を確認できます。
使い方
- 前景色（テキストの色）
- テキストの色をカラーピッカーまたはHEXコード（例: #333333）で入力します。
- 背景色
- 背景の色をカラーピッカーまたはHEXコード（例: #ffffff）で入力します。
- プレビュー
- 入力した色の組み合わせで実際のテキスト表示を確認できます。
- コントラスト比
- 小数第2位まで表示されます（例: 4.54:1）。値が大きいほど読みやすい配色です。
- 判定表
- WCAG 5基準のPASS/FAILを一覧で確認できます。
よくある質問
- このツールは無料ですか？
- はい、無料です。登録も不要です。
- データはサーバーに送信されますか？
- いいえ、すべての処理はブラウザ内で完結します。入力した色情報が外部に送信されることはありません。
- WCAG AA と AAA の違いは何ですか？
- AAはウェブアクセシビリティの最低基準（通常テキスト4.5:1以上）で、多くの法令・ガイドラインが準拠を求めます。AAAはより厳しい最高基準（通常テキスト7:1以上）で、重要な情報や視覚的に困難なユーザーへの配慮が必要な場面で推奨されます。
- 大きい文字（ラージテキスト）の基準は？
- WCAGでは18pt（約24px）以上の通常ウエイト、または14pt（約18.67px）以上のbold体をラージテキストと定義しています。ラージテキストはAA基準3:1以上、AAA基準4.5:1以上が必要です。
- コントラスト比はどう計算されますか？
- WCAG 2.x公式式を使用しています。まず各RGBチャンネルをsRGBリニア化し、相対輝度L = 0.2126R + 0.7152G + 0.0722Bを算出します。コントラスト比は(L_lighter + 0.05) / (L_darker + 0.05)です。