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

カラーコントラストチェッカーについて

カラーコントラストチェッカーは、テキストカラーと背景色の間のWCAGコントラスト比を測定し、通常テキスト、大きいテキスト、UIコンポーネントに対するAAおよびAAAアクセシビリティレベルでペアを評価します。比率とすべての合否判定は、どちらかの色を調整するたびにリアルタイムで更新されます。

リアルなプレビューパネルには、選んだ組み合わせで見出し、本文、小さい文字、ボタン、リンクが表示されるため、抽象的なスウォッチではなく実際のコンテンツで視認性を判断できます。ペアが不合格の場合、ツールはAAのしきい値4.5:1に達する最も近いアクセシブルなテキストカラーを提案し、ワンクリックで適用できます。

計算はWCAG 2.xの相対輝度の計算式に従い、完全にブラウザ内で動作します。アップロードは不要で、チェックは無料です。比率と評価結果のコンパクトなテキストレポートをコピーして、アクセシビリティレビューやプルリクエストに貼り付けることもできます。

カラーコントラストチェッカーの使い方

1. ピッカーまたは値の入力で、テキストカラーと背景色を設定します。
2. 通常テキスト、大きいテキスト、UIコンポーネントに対するコントラスト比とAA/AAAの結果を確認します。
3. ライブプレビューで、実際の色を使った見出し、段落、ボタン、リンクを確認します。
4. ペアが不合格の場合は、提案されたアクセシブルなテキストカラーを適用するか、2色を入れ替えます。
5. 「レポートをコピー」をクリックして、比率と適合結果を共有します。

よくある質問