WCAG コントラストチェックはいくつかの簡単な手順で実行されます。入力情報がブラウザの外に出ることはありません。
- 前景色と背景色を入力します。ツールは hex、rgb()、hsl()、または名前付き CSS カラーを赤、緑、青のチャンネル値に解析します。
- 各 RGB チャンネルは sRGB 伝達関数を使って線形化され、ガンマ符号化された表示値が線形光強度に変換されます。
- 線形値は人間の目の各チャンネルに対する感度で重み付けられます——赤 0.2126、緑 0.7152、青 0.0722。その合計がその色の相対輝度です。
- コントラスト比は (L1 + 0.05) ÷ (L2 + 0.05) で計算されます。L1 は明るい方の色の輝度、L2 は暗い方の色の輝度です。0.05 の追加により、純粋な黒でも計算式が有効になります。
- 算出された比率を WCAG の閾値と比較します：AA 通常テキストは最低 4.5:1、AA 大きいテキストは 3:1、AAA 通常テキストは 7:1、AAA 大きいテキストは 4.5:1 が必要です。大きいテキストとは、18pt 以上または 14pt 以上の太字を指します。
FAQ
WCAG コントラストチェックに関するよくある質問。
AA と AAA の違いは何ですか？
AA はほとんどのウェブコンテンツにおける最低適合レベルです。通常テキストには少なくとも 4.5:1、大きいテキストには 3:1 のコントラスト比が必要です。AAA はより高い基準であり、通常テキストに 7:1、大きいテキストに 4.5:1 を要求します。ニュースサイトの本文など重要なコンテンツには AAA を目標にし、それ以外のデザイン全体では AA を使うこともあります。ブランドカラーですべての箇所で AAA を満たすのは難しいため、多くのチームは全体で AA を目指し、可能な箇所でキーテキストを AAA に引き上げています。
WCAG で「大きいテキスト」とは何ですか？
WCAG 2.x では、大きいテキストを標準の太さで 18 ポイント（24px）以上、または太字で 14 ポイント（約 19px）以上と定義しています。フォントフェイスの一部である記号やアイコンも同じ閾値に従います。どの閾値が自分の UI に該当するかわからない場合は、両方を確認してください——AA 大きいテキストの基準は低い（3:1）ため、AA 通常テキストに不合格だった色の組み合わせのほとんどは、テキストが十分に大きければ AA 大きいテキストには合格します。
色の組み合わせが AA 大きいテキストには合格するのに、AA 通常テキストには不合格なのはなぜですか？
AA 大きいテキストは 3:1 の比率しか必要としないのに対し、AA 通常テキストは 4.5:1 を必要とするからです。WCAG は、大きな文字はコントラストが低くても読みやすいため、大きいテキストに対して低い閾値を設定しています。例えば 4.0:1 のスコアの色の組み合わせは、AA 大きいテキスト（3:1 閾値）には合格しますが、AA 通常テキスト（4.5:1 閾値）には不合格となります。これは、白い背景に明るめのブランドカラーを前景色として使う場合によく見られます。
このツールだけでアクセシビリティ監査を行っても大丈夫ですか？
このツールは一つのこと——2 つのベタ色間の WCAG 2.x コントラスト比——だけをチェックします。本当のアクセシビリティにはそれ以上のものがあります：フォーカスインジケータ、フォントサイズと太さ、情報を伝える唯一の手段としての色、スクリーンリーダーやズームツールとの互換性などです。アプリケーションのアクセシビリティの全体像を把握するには、このコントラストチェックを他の監査方法と併用してください。
入力はどのような色形式に対応していますか？
3、4、6、8 桁の hex コード（# の有無は問わない）、従来のカンマ構文または現代のスペース区切り構文の rgb() および rgba() 値、任意の標準的な色相単位（deg、rad、grad、turn）を使用した hsl() および hsla()、hsv()、hwb()、さらに CSS Color Module Level 4 仕様の 150 個の名前付き CSS カラーをすべてサポートしています。色の解析はすべてデバイス上で行われます。