カラーコントラスト チェッカー
文字（前景）色と背景色をカラーピッカーか 3 桁・6 桁の 16 進コードで入力すると、WCAG 2 のコントラスト比を計算し、4 つの基準 — 通常・大きいテキストそれぞれの AA と AAA — を一度に判定します。内部では各色をガンマエンコードされた sRGB からリニアな光量に変換し、WCAG の係数（R 0.2126、G 0.7152、B 0.0722）で重み付けして相対輝度を求め、(L1 + 0.05) ÷ (L2 + 0.05) を計算します。比は 1:1（同じ色）から 21:1（白地に黒）までの範囲です。 合否のしきい値は WCAG 2.1 の達成基準 1.4.3 と 1.4.6 そのままです: 通常テキストは AA で 4.5:1、AAA で 7:1、大きいテキスト（24px 以上、または太字 18.66px 以上）は 3:1 と 4.5:1 が必要です。ライブプレビューは本文サイズと見出しサイズの両方で組み合わせを表示します — 数値上合格でも、目で確かめる価値はあるからです。すべての計算はブラウザー内だけで行われます。
いろはにほへと ちりぬるを
いろはにほへと ちりぬるを
使い方
- カラーピッカーを使うか 16 進コードを入力して前景（文字）色を設定します — #RGB と #RRGGBB のどちらの形式も使えます。
- 同じ方法で背景色を設定します。
- コントラスト比と 4 つの AA/AAA バッジを確認します — 緑は合格、赤は不合格です。
- 本文サイズと見出しサイズのライブプレビューを確認します。ぎりぎり合格の組み合わせなら、どちらかの色を濃く／薄くしたほうが読みやすくなります。
よくある質問
- AA と AAA に必要な比は？
- WCAG 2.1 の達成基準 1.4.3（AA）は通常テキストに 4.5:1、大きいテキストに 3:1 を要求し、1.4.6（AAA）はそれを 7:1 と 4.5:1 に引き上げます。多くの法規制や調達基準が参照するのは AA で、AAA は最大限の可読性を狙うより厳しい目標です。
- 大きいテキストの基準は？
- 18pt（24px）以上、太字なら 14pt（18.66px）以上です。WCAG はポイントで定義しており、ピクセル値は標準の 96dpi CSS 換算です。つまり 24px の通常の見出しや 19px の太字ラベルが該当します。
- この比はアイコンや UI 部品にも適用されますか？
- WCAG 2.1 の 1.4.11（非テキストのコントラスト）は、インターフェース部品、フォーカスインジケーター、意味のあるグラフィックに隣接色との 3:1 以上を要求します。AA の大きいテキストのバッジと同じしきい値なので、アイコンや枠線の簡易チェックとして流用できます。
- 透明度に対応していますか？
- いいえ — コントラスト比は不透明色に対して定義されています。文字やオーバーレイにアルファがある場合は、先に実際の背景と合成し（白地の 60% 黒は実質 #666666）、その結果の色でテストしてください。
- WCAG 2 の式は可読性の最終結論ですか？
- ADA 訴訟や EN 301 549、Section 508 が引用する規範的な標準ですが、完璧ではありません。暗い背景に明るい文字（ダークモード）の組み合わせを過大評価する傾向があり、WCAG 3 草案の APCA モデルはこれを改善しようとしています。それまでは WCAG 2 の比を満たしつつ、プレビューで自分の目でも確認してください。
このテーマのガイド
関連ツール
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
色の明るさ比較 (HSL vs Lab L* vs WCAG vs HSP)
HSL 明度・HSV 値・WCAG 相対輝度(LRV)・CIE Lab L*(知覚明度)・Rec. 709 ルーマ・HSP 知覚明度・素朴な (R+G+B)/3 など 7 種の明るさ指標を、1 色または 2 色について同時に比較。「より明るく見えるはず」の色がなぜ暗く感じられるか即座に把握できます。
CSS フィルタープレイグラウンド
blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。
カラーパレット ジェネレーター
ベースカラーを選んで、クラシックなカラーホイールのハーモニーを取得 — 補色、スプリット補色、トライアド、テトラド、スクエア、アナロガス、モノクロマティック。
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。