WCAGコントラストチェッカー

1. 前景（テキスト）と背景の色を入力または選択します。

2. コントラスト比（例: 4.52:1）を読みます。

3. 通常テキストと大きなテキストのサイズについてAAとAAAの行を確認します。

4. 必要なレベルが合格するまでHSLの明度を調整し、hex値をコピーします。

• リリース前にデザインシステムのトークンを監査するとき。

• Lighthouseやaxeのアクセシビリティ指摘を直すとき。

• 色相だけでなく、本文と違うリンク色を選ぶとき。

レベルAは最低限、AAは多くの法域（ADA、公共部門のEAA）の法的目標です。AAAは本文には野心的で、大きな見出しは14pxキャプションよりAAAに合格しやすいです。フォーカス可視（2.4.7）はコントラストを補います。キーボード利用者には見えるフォーカスリングが必要で、隣接色に対してしばしば3:1です。各トークンペアの横にデザインシステムで合否を記録してください。