概要 コントラストマトリクス
色リストの N×N WCAG マトリクス
使い方
1 つのグリッドで全ペアのコントラスト比を表示し、パレット全体を一度に監査できます。
限界
マトリクスは入力した色同士を比較するだけで、文字サイズや実際の組み合わせは考慮しません。
コントラストマトリクス
セルをクリックすると前景 / 背景の組をコピーします。
マトリクスの読み方
行が前景色、列が背景色です。各セルにその組の WCAG 比と、本文 AA / AAA の判定が表示されます。
対角線は同じ色同士なので常に 1:1 となり、参考として表示されます。
使う場面
公開前にトークン全体を監査するのに使います。単体では問題なく見えても、組み合わせると失敗する組、特に文字と面の両方に使う中間調のブランド色を露出します。
よくある質問
判定ラベルの意味は？
本文 AA は 4.5:1、AAA は 7:1 です。大きな文字は 3:1 と 4.5:1 になります。
対角線に印があるのはなぜ？
同じ色同士の比は常に 1:1 なので、失敗ではなく参考として扱います。
5 色以上を貼れますか？
はい。1 行に 1 色を追加するとマトリクスも増えます。