大きいテキスト
通常の本文テキスト
小さいキャプション
#000000 このツールについて
カラーコントラスト比は、2色間の輝度の知覚的な差を測定するもので、1:1（同一）から21:1（純白上の純黒）までの値で表されます。WCAG 2.xの計算式は各sRGBチャンネルを線形化し（0.03928未満は線形セグメント、それ以上は2.4乗カーブ）、0.2126 R / 0.7152 G / 0.0722 Bで重み付けして相対輝度を求め、(明るい方 + 0.05) / (暗い方 + 0.05) を計算します。Web Content Accessibility Guidelinesは4つのしきい値を定めています。AAは通常テキストに4.5:1、大きなテキスト（>=24px、または太字で>=18.66px）に3:1を要求し、AAAはそれぞれ7:1と4.5:1に引き上げます。
本文テキスト、ボタン、リンク、フォームのラベルが出荷前にアクセシビリティ要件を満たしているかを確認したり、監査で指摘されたデザインシステムのカラーペアをデバッグしたり、パレットを捨てずに合格する代替色を見つけたりするのにお使いください。いずれかのフィールドに任意のCSSカラー（hex、rgb()、hsl()、または名前付きカラー）を入力すると、比率と判定グリッドがリアルタイムに表示され、AAが不合格のときは、元の色のOKLCH明度を4.5:1に到達するのにちょうど十分なだけ調整した前景色の提案を適用できます。
コントラスト比は色相ではなく輝度のみに依存します。明度が同じ2色は色合いがまったく異なっていても不合格になることがあります。色覚特性のあるユーザーや弱視のユーザーは輝度の差に頼っているためです。
よくある質問
WCAGに合格するにはどのコントラスト比が必要ですか？
WCAG 2.1 レベルAAは、通常テキストに少なくとも4.5:1、大きなテキスト（24px以上、または太字で18.66px）に3:1のコントラスト比を要求します。レベルAAAは通常テキストに7:1、大きなテキストに4.5:1を要求します。
コントラストにおける大きなテキストとは何を指しますか？
大きなテキストとは、太字の場合18.66px（14pt）以上、通常の太さの場合24px（18pt）以上を指します。より大きなグリフは低いコントラストでも読みやすさを保てるため、より低いコントラストしきい値が適用されます。
WCAGのコントラスト比はどのように計算されますか？
各色の相対輝度は、sRGBチャンネルを線形化し、0.2126 R + 0.7152 G + 0.0722 Bで重み付けして求めます。比率はそれから (明るい方の輝度 + 0.05) / (暗い方の輝度 + 0.05) となり、どちらの色を前景にするかに依存しない、1:1から21:1までの値が得られます。