WCAGコントラストチェッカー について
WCAG 2.1 AAおよびAAAガイドラインに対する色のコントラスト比をチェックします。ライブプレビュー、自動修正提案、CSSエクスポート付きで、すべてブラウザ内で動作します。
WCAGコントラストチェッカー の使い方
- 1前景（テキスト）色と背景色を入力または選択します。
- 2コントラスト比とAAおよびAAAレベルのWCAG合否結果を確認します。
- 3異なるサイズでのライブテキストプレビューを確認します：標準テキスト、大きい見出し、バッジ、ボタン、キャプション。
- 4「入れ替え」で前景と背景を逆にするか、「ランダムペア」でインスピレーションを得ます。
- 5アクセシブルなカラーペアのCSS変数をコピーします。
ヒント
- WCAG AAは標準テキストに4.5:1、大きいテキストに3:1が必要です。AAAはそれぞれ7:1と4.5:1が必要です。
- Starter以上にアップグレードして、ペアが不合格の場合に最も近いAA準拠の色の提案を取得してください。
- 実際の使用サイズで色をテストしてください。見出しで合格するペアでも、小さい本文テキストでは不合格になる場合があります。
無料 vs 有料の制限
無料：コントラストチェックとプレビュー。Starter以上：自動修正色提案とアクセシブルペア。
OneKitTools チーム更新日 2.21.4