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

これは、テキストの色と背景色の正確なコントラスト比と、AA および AAA のアクセシビリティ レベルを満たしているかどうかを示す WCAG カラー コントラスト チェッカーです。スウォッチまたは 16 進コードで色を選択し、ライブ プレビューを確認します。

バッジが必要なレベルに達するまで 2 つの色を調整すると、結果が即座に更新されます。

背景に明るさが近すぎるテキストは、特にロービジョンや色覚異常のある人、または明るい日光の下で携帯電話を使用している人にとって、読みにくいか不可能です。十分なコントラストにより、コンテンツが誰にとっても読みやすくなります。

Web コンテンツ アクセシビリティ ガイドライン (WCAG) が標準を定めています。 AA (ほとんどのサイトが目標としており、多くのアクセシビリティ法が参照しているレベル) では、通常のテキストの場合は 4.5:1、大きなテキストの場合は 3:1 の比率が必要です。 AAA は 7:1 と 4.5:1 でより厳しくなります。

大きな文字はコントラストが低くても読みやすいため、大きなテキストのしきい値は低くなります。およそ 24 ピクセル (18 ポイント)、または太字の場合は 18.66 ピクセル (14 ポイント) の大きさとしてカウントされます。

この比率は、WCAG の公式公式を使用した 2 色の相対輝度から得られ、1:1 (コントラストなし、同一色) から 21:1 (白地に黒) までの値が生成されます。

すべてはブラウザ内で計算されるため、即座にプライベートに処理されます。あなたが選んだものはどこにもアップロードされません。