カラーコントラストチェッカー

大きなテキストの基準

WCAGでは、大きなテキストを18ポイント以上（約24 CSSピクセル）、または太字の14ポイント（約18.7ピクセル）と定義しています。このサイズのテキストだけが、低い3:1の基準を使用できます。本文、キャプション、フォームラベルには、AAで4.5:1が必要です。比率は、同じ色の1:1から、白地に黒の21:1までです。ボタンの輪郭、フォームフィールドの境界線、フォーカスインジケーター、意味を持つアイコンには、隣接する色に対して3:1を求める別のルールである非テキストコントラストが適用されます。

透明色と適用除外

このチェッカーで扱えるのは不透明な色です。半透明のテキストやオーバーレイでは、カラーミキサーで不透明度を重みとして背景と混ぜ、実際に表示される色を求めてから確認してください。

無効化されたコントロール、純粋な装飾、ロゴはコントラストルールの適用除外です。フォームフィールドのプレースホルダーテキストは除外されないため、薄いグレーのプレースホルダーは最もよくある違反の1つです。

使い方

1. 有効な#RGBまたは#RRGGBBの値と、必要なパーセンテージを入力します。
2. ブラウザ内でローカルに実行される定義済みのカラー演算を実行します。
3. スウォッチを確認し、結果またはパレットの値をコピーします。

プライバシーと制限事項

色情報はこのデバイス内に留まります。コントラストの出力は数学的なチェッカーであり、包括的なWCAG準拠の保証ではありません。文脈、フォントレンダリング、非テキストのコントラスト、UIの状態は引き続きレビューが必要です。