WCAGコントラストチェッカーとは？
前景色と背景色のコントラスト比を計算し、通常テキストと大きなテキストに対してWCAG 2.1 AAレベルおよびAAAレベルのアクセシビリティ基準を満たしているかどうかを報告するツールです。
使い方
- カラーピッカーまたはHEX入力を使用して、前景色（テキスト）と背景色を入力または選択します。
- コントラスト比と、通常テキスト・大きなテキスト・UIコンポーネントにわたるWCAG AAおよびAAAへの適合結果（合格/不合格）を確認します。
- コントラストが不合格の場合、提案された色調整を使用して最も近いアクセシブルな色の組み合わせを見つけます。
結果
UIデザイナーがブランドカラーの青 #3B82F6 と白 #FFFFFF の組み合わせを確認します。4.5:1のコントラスト比は大きなテキストのAAに合格しますが、通常テキストのAAAには不合格のため、#2563EB（5.3:1）に暗くして両方に合格させます。