文字色と背景色のコントラスト比を判定・APCA Lcも表示
文字色（前景）と背景色のHEXコードを入力するだけで、WCAG 2.xのコントラスト比を自動計算し、AA・AAAの合否をリアルタイムで判定する無料ツールです。カラーピッカーで直感的に色を選ぶこともでき、選んだ配色は上部のプレビューに即座に反映されるので、実際の見え方を確認しながら読みやすい配色を探せます。インストールや会員登録は不要で、すべての計算はお使いのブラウザ内で完結します。
使い方はかんたんです。「文字色（前景）」と「背景色」にHEX（例: #1E1E35）を入力するか、左のカラーピッカーで色を選びます。すると「コントラスト比」が大きく表示され、通常の文字と大きな文字それぞれについてAA・AAAの合否バッジが更新されます。あわせて新しい指標であるAPCAのLc（推定値）も表示します。「前景と背景を入れ替え」ボタンで、明暗の向き（ポラリティ）を反転したときの見え方も比較できます。
Webサイトやアプリのデザインでアクセシビリティ基準（WCAG AA）を満たす配色選び、ボタンや見出しのテキストが背景に対して十分読みやすいかの確認、ブランドカラーを使いつつ最低限の可読性を確保したいときのチェックに。デザインシステムのトークン設計や、ダークモード配色の検証にも役立ちます。
WCAG 2.xのコントラスト比は、各色の「相対輝度」から求めます。まずsRGBの各チャンネル（R/G/B）を0〜1に正規化し、しきい値0.03928を境に線形化（ガンマ補正の解除）します。次に 0.2126×R + 0.7152×G + 0.0722×B で相対輝度Lを算出し、2色の輝度を L1（明るい方）・L2（暗い方）として (L1+0.05)÷(L2+0.05) を計算した値がコントラスト比です。値は最小1:1（同色）から最大21:1（白と黒）の範囲になります。
| 対象 | WCAG AA | WCAG AAA |
|---|---|---|
| 通常の文字（本文など） | 4.5:1 以上 | 7:1 以上 |
| 大きな文字（18pt/太字14pt以上） | 3:1 以上 | 4.5:1 以上 |
| UI部品・グラフィック境界 | 3:1 以上 | — |
APCA（Accessible Perceptual Contrast Algorithm）は、WCAG 3.0に向けて開発が進む新しいコントラスト指標です。従来の比率は明暗の向きを区別しませんが、APCAは文字色と背景色のどちらが明るいか（ポラリティ）や、フォントの大きさ・太さの影響を考慮し、Lc（Lightness contrast）という値で知覚上のコントラストを表します。目安として、Lc45で大きな見出し、Lc60で本文、Lc75以上でより小さな文字や確実な可読性が必要な場面に適するとされます。本ツールのLcは標準的なAPCAアルゴリズムに基づく推定値です。