Loading...
Loading...
任意のテキストと背景色の組み合わせをWCAG 2.2 AAおよびAAAのコントラスト要件に対してテストし、即座に合格/不合格のフィードバックとライブプレビューを提供します。
高い比率はより読みやすいです。21:1は純粋な黒と白です。
ボディと見出しサイズの両方で色の組み合わせを確認します。
16ピクセルの通常のボディテキスト。WCAG 2.2は前景テキストとその直近の背景とのコントラストを測定します — このプレビューは、ユーザーが見るのと同じように、上に入力した組み合わせを正確に示します。
コントラストチェッカーは、2つの色の輝度差を測定し、それを1:1（同一）から21:1（純粋な黒と純粋な白）の比率として報告します。アクセシビリティガイドラインは、その比率を使用して、視覚障害、色盲、または明るい日光の下で見られる画面のユーザーにとってテキストが読みやすいかどうかを判断します。このツールはWCAG 2.2に準拠しており、米国のADA、欧州アクセシビリティ法、およびほとんどの企業デザインシステムで参照されている同じ基準です。任意の2色を入力すると、5つのWCAG閾値に対する即座の合格/不合格が得られ、ボディと見出しサイズの両方でライブプレビューが表示されます。すべてがブラウザ内で実行されます — アップロード不要、追跡不要、アカウント不要。
16進数コードを貼り付けるか、前景（テキスト）カラーのためにカラーピッカーを使用します。このツールは、#03Aのような3桁の省略形も受け付けます。
背景についても同様に行います。テキストカラーしかわからない場合は、デフォルトテストのために背景を白（#FFFFFF）にしておきます。
大きな比率の数字は、入力するにつれて更新されます。3.0未満の比率は、通常のテキストに対する最も緩いWCAG閾値でも不合格となります。
5つのバッジは、AA通常、AA大、AAA通常、AAA大、およびUIコンポーネントの閾値に対する合格/不合格を示します。AAは通常の法的最低限であり、AAAは主要なコンテンツのための強化された目標です。
プレビューが見出しとボディサイズで正しく表示されることを確認し、次にCopy CSSを使用してスタイルシート用の`color:`と`background-color:`の宣言を取得します。
各チャネル（R、G、Bを0–1にスケーリング）について： c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4 相対輝度： L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear コントラスト比： ratio = (L_light + 0.05) / (L_dark + 0.05) ここで、L_light = max(L1, L2) および L_dark = min(L1, L2)
この式はWCAG 2.xから来ており、輝度を計算する前に各sRGBチャネルにガンマ補正曲線を適用します。重み（0.2126、0.7152、0.0722）は赤、緑、青の光に対する人間のコーン感度を反映しています。どちらの項にも0.05を加えることで、1つの色が完全な黒の場合にゼロ除算を防ぎます。比率は1:1（同一の色）から21:1（純粋な黒と純粋な白）までの範囲です。
| ペア | 比率 & 判定 |
|---|---|
#000000 on #FFFFFF | 21:1 — すべての閾値を通過 標準的な最大コントラスト。長文リーディングUIに使用されます。 |
#1A73E8 on #FFFFFF | 4.63:1 — AA通常を通過、AAA通常に失敗 白に対するGoogleの青。本文には合法ですが、AAAには達していません。 |
#808080 on #FFFFFF | 3.95:1 — AA通常に失敗、AA大に合格 白に対する中間グレー — 見出しには適していますが、段落には明るすぎます。 |
最終更新日