CSSカラーコントラストチェッカーとは
WCAGコントラスト比は、2つの色の輝度差を測定します。4.5:1の比率は通常テキストのAA基準を満たし、7:1はAAAを満たします。これらの基準は、弱視、色覚異常、または困難な照明環境で画面を見ている人でもコンテンツを読み取れるようにするのに役立ちます。このツールは、入力された16進数値から正確な比率を計算し、その組み合わせが必要なレベルに合格するかどうかを表示するため、デザイナーや開発者が公開前に色の組み合わせを確認できます。
クイックアンサー
2つの色の組み合わせが公開前にWCAGコントラスト基準を満たすかどうかを確認します。ツールは正確な比率を計算し、通常テキスト、大きなテキスト、UIコンポーネントがAAまたはAAAレベルに合格するかを表示します。
Last updated: 2026-06-11
制限事項
- カラーピッカーは16進数値のみを返します。RGB、HSL、または名前付きカラーの直接入力はサポートしていません。
- ツールはソリッドカラーのペアをチェックします。要素全体で輝度が変化するグラデーションテキスト、box-shadowテキスト、背景画像のコントラストは評価しません。
- コントラスト比は入力された色から計算されます。いずれかの色が透明な場合、結果は実際のページ背景に対する実際の可視コントラストを反映しません。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 前景色を16進数コード、RGB値、またはカラーピッカーで入力します。
- 背景色も同様に入力します。
- コントラスト比の結果と、通常テキストおよび大きなテキストのWCAG AAおよびAAAの合格/不合格表示を確認します。
- 比率が目標のアクセシビリティレベルに達するまでいずれかの色を調整します。
主な用途
- 明るい背景の本文テキストがWCAG AAの読みやすさ基準を満たしているか確認する。
- ボタン、バッジ、UIコンポーネント全体のブランドカラーの組み合わせを検証する。
- 開発に引き渡す前にアクセシブルなデザイン仕様を準備する。