コントラストチェッカーは何を測定しますか？
コントラストチェッカーは前景色と背景色の相対的な輝度を比較します。結果は1:1（色が視覚的に同じ）から21:1（黒と白が最大のコントラスト）までの比率で表示されます。
このツールは通常のテキストと大きなテキストに対してWCAGスタイルの合否指標を報告します。初期のデザイン判断、コンポーネント状態、テーマトークン、より完全なアクセシビリティレビューの前の簡易チェックに役立ちます。
結果の読み方
| Check | 最小比率 | Meaning |
|---|---|---|
| AA（通常のテキスト） | 4.5:1 | 通常の本文テキストの一般的な目標です。 |
| AA（大きなテキスト） | 3:1 | 文字の形が読みやすくなる大きめまたは太めのテキストに適用されます。 |
| AAA（通常のテキスト） | 7:1 | 高いアクセシビリティを求める文脈での通常テキストに対するより厳しい目標です。 |
| AAA（大きなテキスト） | 4.5:1 | 大きなテキストに対するより厳しい目標です。 |
このツールが証明しないこと
比率は強いシグナルですが、完全なアクセシビリティ監査ではありません。実際の読みやすさはタイポグラフィ、フォントの太さ、ホバー/フォーカス状態、無効状態、周囲の色、画面品質、テキストが画像やグラデーションの上に表示されるかどうかにも依存します。
- 透明色やグラデーションは別途レビューが必要です。
- 小さなアイコンや細い線は、近くのテキストよりも強いコントラストを必要とする場合があります。
- ブランドカラーはある組み合わせでは合格し、別の組み合わせでは不合格になることがあります。
- QRスキャンのコントラストとテキスト可読性のコントラストは関連していますが、同じチェックではありません。
コントラストが弱い場合の改善方法
前景色を暗くする
明るい背景の場合は、テキスト色をより暗いニュートラル色や強めのブランドカラーに近づけてください。
背景を明るくする
小さな背景の調整で、前景トークンを変更せずにブランドカラーを合格にすることができます。
テキストサイズや太さを増やす
大きめまたは太めのテキストはAAの基準値が低くなりますが、それでも十分な視覚的分離が必要です。
すべての状態をチェックする
ホバー、フォーカス、無効、選択、エラーなどの状態は、しばしば異なるカラーペアを使用します。
よくある質問
これは完全なWCAG準拠の監査ですか？
いいえ。色のペアについてWCAGスタイルのコントラスト閾値を計算します。完全なレビューではレイアウト、キーボード操作、セマンティクス、フォーカス状態、代替テキスト、実際にレンダリングされたタイポグラフィも確認します。
大きなテキストとは何ですか？
WCAGのガイダンスでは、大きなテキストをおおよそ通常の18ptまたは太字の14pt以上と扱います。ウェブ作業では、デザインラベルだけでなく実際にレンダリングされたサイズと太さを確認してください。
透明な色に使用できますか？
この簡易チェッカーは不透明なsRGBカラーを使用します。UIが透明を使用する場合は、まず最終的にレンダリングされた前景と背景を合成し、その結果の組み合わせをチェックしてください。
AAを通過したからといって常にデザインが読みやすいわけですか？
必ずしもそうではありません。非常に細いフォント、小さいUIラベル、混雑した背景、低品質のディスプレイは、テキストを読みづらくする可能性があります。比率は重要な指標の一つとして扱ってください。
これはQRコードのコントラストと同じですか？
いいえ。QRコードのコントラストはスキャナーの信頼性に影響しますが、このツールはテキストの可読性のしきい値に焦点を当てています。数学的には関連しますが、実務上の判断は異なります。