WCAGコントラストチェッカーとは？
前景色と背景色のコントラスト比を計算し、通常テキストと大きなテキストに対してWCAG 2.1 AAレベルおよびAAAレベルのアクセシビリティ基準を満たしているかどうかを報告するツールです。
本チェッカーは WCAG 2.1 の相対輝度比を 2 つの色から計算します — hex、rgb()、hsl()、または CSS の色名で入力できます。AA(本文 4.5:1、大きい文字 3:1)と AAA(7:1、4.5:1)で評価し、フォーム枠やアイコンなど UI 部品向けの 3:1 下限もチェックします。不合格になったら、提案パネルが前景を少しずつ明暗方向にずらして合格値へ近づけ、AA と AAA の両方の目標を提示します。
使い方
- 前景色(テキスト)と背景色を入力または選択します — hex、rgb()、hsl()、CSS の色名を貼り付けるか、カラーピッカーを使います。
- コントラスト比と、通常テキスト・大きなテキスト・UIコンポーネントにわたるWCAG AAおよびAAAへの適合結果（合格/不合格）を確認します。
- コントラストが不合格の場合、提案された色調整を使用して最も近いアクセシブルな色の組み合わせを見つけます。
使用するタイミング
- ランディングページ公開前に、白背景や濃色背景でのブランドカラーを点検する。
- ボタンのデフォルト・ホバー・無効状態でアクセシブルな配色を選ぶ。
- プレースホルダや無効状態のフォーム文字が 4.5:1 を割っていないか確認する。
結果
UIデザイナーがブランドカラーの青 #3B82F6 と白 #FFFFFF の組み合わせを確認します。4.5:1のコントラスト比は大きなテキストのAAに合格しますが、通常テキストのAAAには不合格のため、#2563EB（5.3:1）に暗くして両方に合格させます。
よくある質問
- 本文を WCAG AA に通すために必要な比率は?
- 背景に対して 4.5:1 が必要です。大きい文字(18pt 通常または 14pt 太字以上)は 3:1 まで緩和されます。AAA だとそれぞれ 7:1、4.5:1 に上がります。フォーム枠などの UI 部品は 3:1 で足ります。
- 自分には十分読める濃灰色 × 白がなぜ不合格になるのですか?
- 個人の感覚と計測値はすぐにズレます。4:1 はキャリブレーション済みの画面と十分な照明では問題なく見えますが、ロービジョン・反射・古いモニターでは破綻します。WCAG は最良ではなく最悪の状況に合わせて閾値を引いています。
- アイコンやフォーム枠にも本文と同じコントラストが必要?
- いいえ。WCAG 2.1 で非テキスト部品向けに 3:1 のルールが追加され、枠線・アイコン・フォーカス表示・グラフ要素などが対象になりました。純装飾の画像は除外されますが、情報を伝える要素は隣接色に対して 3:1 を満たす必要があります。
- ブランドカラーを変えずに不合格を直すには?
- ブランドカラーを動かせないなら背景を動かします。背景を暗く、または明るく寄せて比率を超えるまで調整してください。提案パネルは前景を小刻みに動かしていますが、同じ発想で背景にも適用できます。
- 半透明文字や写真上の文字に関する WCAG のルールは?
- WCAG は文字直下の最悪ピクセルを評価します。写真上の文字なら半透明のオーバーレイや塗りつぶしプレートを敷くのが定石です。出発点の hex ではなく、実際にレンダリングされた色で測定してください。