コントラストチェッカーの仕組み
このツールは2色間のWCAGコントラスト比を計算し、そのペアが通常テキスト、大きいテキスト、非テキストUI要素のAAまたはAAAレベルを満たすかどうかを表示します。すべてブラウザ内でローカルに計算され、入力した色がアップロードされることはありません。
WCAGコントラストチェッカー
2色を入力または選択すると、WCAGコントラスト比が瞬時に表示されます。通常の文字と大きな文字のAA/AAA合格バッジ付きです。
コントラストチェッカーの使い方をステップごとに解説
- 前景色(テキストの色)を入力または選択します。
- 背景色を入力または選択します。
- 通常テキスト、大きいテキスト、非テキストUI要素それぞれのコントラスト比とAA/AAAのバッジを確認します。
- 「色を入れ替える」を使って、逆の組み合わせも確認します。
よくある使用例
- ボタンコンポーネントを公開する前に、ブランドのメインカラーを白または黒に対して確認する。
- 彩度を抑えたグレーの本文テキストが、明るいカード背景の上でもAAをクリアしているか確認する。
- 段落内のリンクの色が、通常テキストの基準である4.5:1に達しているか確認する。
- 細めのウェイトの大きな見出しが、緩和された大きいテキストの基準3:1をクリアしているかテストする。
よくある質問
このツールは色をサーバーに送信しますか?
いいえ、計算はすべてブラウザ内でJavaScriptにより行われ、入力した内容がアップロードされることはありません。
AAまたはAAAに必要なコントラスト比はどれくらいですか?
WCAG 2.xでは、通常テキストでAAは4.5:1、AAAは7:1、大きいテキストでAAは3:1、AAAは4.5:1が必要です。
大きいテキストとはどのようなものですか?
通常の太さで少なくとも24px(18pt)、太字ではおよそ18.7px(14pt)以上を指します。それより小さい場合は通常テキストの基準が適用されます。
前景色と背景色を入れ替えても比率が変わらないのはなぜですか?
比率の計算式は対称的で、明るい方と暗い方の輝度だけを比較し、どちらの色がテキストに使われているかは考慮しません。それでも入れ替えが役立つのは、役割を逆にした場合にもそのペアが機能するかどうか、たとえば明るいチップの上の暗いテキストと、暗いチップの上の明るいテキストの両方を確認できるためです。
AAに合格すればデザインがアクセシブルだと保証されますか?
いいえ。コントラストは数あるWCAG達成基準の1つに過ぎません。色覚特性のある人への配慮、フォーカスの視認性、テキストの拡大、キーボード操作は別の確認項目です。このサイトの色覚シミュレーターはそのうちの1つをカバーしています。
これはW3CやWebAIMの公式ツールですか?
いいえ。公開されているWCAG 2.xのコントラスト計算式を独自に実装したもので、W3Cや他のアクセシビリティ団体とは提携していません。