任意の前景色と背景色の WCAG 2.1 コントラスト比を確認し、サンプルテキストをプレビューして、AA/AAA 合格結果を即座に確認できます。
機能
- ライブカラーピッカー: Ant Design ピッカーで前景色と背景色を調整するか、正確な HEX 値を入力します。
- WCAG マトリックス: 通常テキスト、大きなテキスト、UI グラフィックスの AA/AAA 要件を1つのテーブルで確認できます。
- 正確な輝度: コントラスト比は、線形化された RGB チャネルを使用した WCAG 2.1 に従い、色ごとの輝度読み取り値が含まれます。
- プレビューブロック: 選択したパレットを使用して、ライブサンプルカード内で見出しと段落をテストします。
使用方法
- 色を選択: 前景色と背景色の HEX 値を選択または貼り付けます。
- 比率を確認: 計算されたコントラスト比と AA/AAA テーブルで合格/不合格の洞察を確認します。
- コピーを調整: サンプルテキストを編集して、実際のラベル、ボタン、またはマーケティングコピーをプレビューします。
技術詳細
相対輝度
各 RGB チャネルは、係数 0.2126、0.7152、0.0722 で輝度を計算する前に、WCAG ガンマ曲線を使用して線形値に変換されます。
コントラスト比
比率式 (L1 + 0.05) / (L2 + 0.05) は、明るい色と暗い色を比較して、デバイス間で一貫した読みやすさを確保します。
閾値
AA 通常テキストは ≥ 4.5:1、大きなテキストは ≥ 3:1、AAA 通常は 7:1、AAA 大きなテキストは 4.5:1、グラフィカルオブジェクトは 3:1 を満たす必要があります。
よくある質問
- 大きなテキストは異なる閾値を使用しますか？
- はい。≥ 18px 通常または 14px 太字のテキストは大きなテキストとして認定され、AA には 3:1、AAA には 4.5:1 のみが必要です。
- グラデーションをテストするにはどうすればよいですか？
- グラデーションの最も明るい停止点と最も暗い停止点を確認してください。各停止点のペアは、目的の比率を満たす必要があります。
- アイコンはテキストとしてカウントされますか？
- ソリッドアイコンと必須の UI グラフィックスは、背景に対して少なくとも 3:1 のコントラストを満たす必要があります。
関連ドキュメント
- WCAG 2.1 コントラスト（成功基準 1.4.3） - テキストとテキストの画像の最小コントラストレベルに関する公式ガイダンス。
- WCAG 2.1 コントラスト（1.4.6） - AAA 適合のための強化されたコントラスト要件。
- MDN - 輝度の計算 - アクセシビリティツールで使用される線形 RGB 式の背景。
- W3C - コントラスト比の数学 - 比率式、丸め、根拠の詳細。
- インクルーシブデザインカード - 多様な視聴者のための色とタイポグラフィのペアリングに関するヒント。