無料の WCAG カラー コントラスト チェッカー: ブラウザーでテキストと背景の色が AA および AAA に準拠しているかどうかをテストします。 16 進数または RGB 値を入力すると、コントラスト比が確認され、即座に合格/不合格になります。ログインもアップロードもありません。
sRGB 相対輝度を使用して、前景色 (テキスト) の色と背景色の間の WCAG 2.x コントラスト比を計算します。通常のテキストとラージ テキストに関する数値比率 (たとえば、4.52:1) に加えて、WCAG AA および AAA しきい値の合否を取得します。これはデザイン QA ヘルパーであり、サイト全体の完全に自動化されたアクセシビリティ監査ではありません。
16 進数 (#RGB、#RRGGBB、#RRGGBBAA)、rgb()、および rgba()。 Figma トークン、CSS 変数、またはデザイン ドキュメントからブランド パレット値を貼り付けます。 #fff のような短い 16 進数は、輝度が計算される前に #ffffff に展開されます。
AA は法的および製品の共通ベースラインです。通常のテキストの場合は 4.5:1、大きなテキストの場合は 3:1 です。 AAA はさらに厳しく、通常は 7:1、ラージは 4.5:1 です。多くのマーケティング サイトは、AA をボディ コピーとしてターゲットにし、AAA をヒーローの見出しまたはハイリスク UI のみとしてターゲットにしています。このツールは両方を表示するため、設計に基づいて防御可能なターゲットを選択できます。
大きなテキストは、少なくとも 18 ポイント (24 CSS ピクセル) の通常の太さ、または少なくとも 14 ポイント (約 18.66 CSS ピクセル) の太字です。ボタン、キャプション、細かい文字は、たとえ見出しが合格したとしても、AA に合格しないことがよくあります。H1 見本だけでなく、出荷するすべてのサイズを確認してください。
いいえ。解析と輝度の計算は完全にブラウザ内で実行されます。未リリースのパレット実験とクライアント NDA カラーはデバイスに残ります。完了したら、共有マシンのフィールドをクリアします。
rgba 値と #RRGGBBAA 値は解析されますが、コントラストは不透明な sRGB チャネルで評価されます。チェッカーは写真の背景上にテキストをアルファ合成しません。画像上のテキストについては、コピーの背後にある有効な色をサンプリングするか、最初に単色のオーバーレイを使用してから、再確認してください。
はい。コア率と合格/不合格パスはログイン不要で無料です。