lockファイルはサーバーに送信されません
2色間のコントラスト比を検査する無料オンラインツールです。 WCAG 2. 1アクセシビリティ基準（AA、AAA）の適合を自動判定します。 ブラウザ内で処理されサーバー通信がありません。 WebアクセシビリティやUIデザイン検証に必須です。
コントラストチェッカーの使い方は?
- 前景色（テキスト）と背景色を入力します。
- コントラスト比とWCAG等級（AA/AAA）を確認します。
- 必要に応じて色を調整して基準を満たします。
コントラストチェッカーに関するよくある質問
WCAG AAとAAAの違いは？
AAは通常テキスト4.5:1、大きなテキスト3:1以上です。AAAはより厳しく7:1と4.5:1を要求します。
コントラスト比が不適合の場合は？
色を明るくまたは暗く調整してコントラストを高めてください。リアルタイムで結果が確認できます。
大きい文字は基準が緩いそうですが、どこからが大きい文字ですか？
WCAGでは、通常の太さなら18pt（約24px）以上、太字（bold）なら14pt（約18.7px）以上を大きい文字とみなします。この条件を満たすとAA基準は4.5:1から3:1に緩みます。ただしこれは最低ラインであって目標ではありません。本文は画面の明るさを落とした状態や日光の下でも読めなければならないため、できれば7:1に近づけておくほうが安全です。
半透明の背景や写真の上に置いた文字の対比はどう確認しますか？
対比の計算は単色2つを前提にしているため、写真のように背景が変化する場合は、最も明るい箇所と最も暗い箇所をそれぞれスポイトで拾い、2回確認する必要があります。どちらか一方でも基準を下回れば、実際には画像のどこかで文字が埋もれます。実務では、写真の上に半透明の黒レイヤーを重ねたり文字に影を付けたりするより、単色の帯を敷いてその上に文字を置くほうが確実です。
コントラストチェッカーを上手に活用するには?
- 本文は4.5:1以上、18pt以上または太字14pt以上の大きな文字は3:1以上でAAを満たします。
- 日本の公的サイトはJIS X 8341-3に沿って作られ、コントラスト比の基準はWCAGと同じです。
- アイコンや入力欄の枠など、テキスト以外の要素にも3:1の対比が求められます。
Powered by Patrache Studio Tools