コントラストグリッド について
すべてのカラー組み合わせのWCAGコントラスト比グリッドを生成します。Eightshapesスタイルで、アクセシビリティ準拠を一目で確認できます。
コントラストグリッド の使い方
- 1HEX値とオプションのラベルでパレットに色を追加します。
- 2グリッドがすべての前景/背景組み合わせのコントラスト比を自動生成します。
- 3WCAG AAまたはAAAレベルに合格するペアと不合格のペアをレビューします。
- 4すべての組み合わせ、合格のみ、不合格のみを表示するようにグリッドをフィルタリングします。
- 5ドキュメントやチームレビュー用に完全なグリッドをCSVとしてエクスポートします。
ヒント
- ブランドカラーとニュートラルカラーから始めて、アクセシブルなテキスト/背景ペアを素早く見つけてください。
- WCAG AAは標準テキストに最小4.5:1、大きいテキストに3:1の比率を要求します。
- CSVをエクスポートして、開発者リファレンス用のデザインシステムドキュメントに含めてください。
無料 vs 有料の制限
無料：色数制限あり。Starter以上：パレット内の無制限色。
OneKitTools チーム更新日 2.21.4