🔍
デザイナーやフロントエンド開発者が配色のアクセシビリティを確定する前には、色のコントラストが役立ちます。2色間のWCAGコントラスト比を測定します。
2色間のWCAGコントラスト比を測定します。アカウントを作成せずブラウザーで無料で利用でき、表示された結果を十分に確認してから次の作業へ進めます。
サンプルでは暗い色と明るい色を比較します。ツールはコントラスト比を計算し、関連する WCAG 基準を表示します。通常テキスト、大きなテキスト、インターフェース要素にその比率で十分か確認し、デザインシステムが許せば別の組み合わせをテストします。結果は公開前に判断するのに役立ちます。
入力
#0F172A
#FFFFFFすべてのコントラスト計算はブラウザ内で実行されます。入力した色コードはデバイス上に留まり、どこにも送信されません。結果はチェック後すぐに表示されます。これらの値を保持せずに、フィールドをクリアするかタブを閉じることができます。
WCAG 基準はテキストサイズと目的によって異なります。通常テキストでは、レベル AA は通常、大きなテキストよりも高いコントラストを要求します。特定のケースについてツールが表示するガイダンスを読み、各テキストスタイルを個別に確認してください。
フィールドは、ツールが読み取れる値、特に 16 進数の色コードを想定しています。名前が認識されない場合は、同等の 16 進数コードに置き換えて、もう一度チェックを実行してください。
いいえ、入力された 2 つの色の間のコントラストを計算します。画像やページ全体を読み取ることはありません。モックアップの場合は、使用されている色コードを記録し、重要な各組み合わせを個別にテストしてください。