開発者向け / TOOL 17
文字色・背景色コントラスト比計算
2色のHEX値からWCAG 2.xの相対輝度とコントラスト比を計算し、AA・AAAの合否を確認します。
01 条件を入力AUTO CALCULATE
サンプルテキスト Aa 文字の見え方
02 / YOUR RESULT結果
色を入力すると結果が表示されます
計算結果は参考値です。
計算方法・条件・注意点をあわせてご確認ください。
計算方法・根拠を確認 ↓
URL共有時は、対応する入力値がURLに含まれます。
使い方
文字色と背景色をカラーピッカーまたはHEX入力欄で指定してください。入力すると相対輝度、コントラスト比、WCAG 2.xのAA・AAA基準に対する合否、プレビューを更新します。「色を入れ替え」は前景色と背景色を交換します。実際の文字サイズや太さも確認しながら、配色の目安として使ってください。
計算方法・根拠
各RGB値を0〜1に正規化し、sRGBを線形化します。cが0.03928以下ならc/12.92、それ以外は((c+0.055)/1.055)^2.4です。相対輝度Lは0.2126R+0.7152G+0.0722B、比率は明るい側をL1として(L1+0.05)/(L2+0.05)で求めます。目安として通常文字はAA 4.5:1・AAA 7:1、大きな文字はAA 3:1・AAA 4.5:1を判定します。
注意点
- コントラスト比は色だけの計算です。文字サイズ、太さ、フォント、周囲の色、画像や状態変化も読みやすさに影響します。
- 入力は#RRGGBB形式です。短縮形やアルファ値には対応していません。
- 合格はアクセシビリティの全要件を満たす保証ではありません。実機や支援技術でも確認してください。
よくある質問
Q. AAとAAAはどちらを目指すべきですか?
A. AAは一般的な達成目標、AAAはより厳しい目標です。本文の通常文字は4.5:1以上を目安にし、用途の要件に従ってください。
Q. 大きな文字の基準はなぜ低いのですか?
A. 文字が大きいほど形を識別しやすいため、WCAGでは通常文字と異なる基準を定めています。サイズの判定はフォントや太さにも関係します。