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

カラー コントラスト チェッカーは、前景 (テキスト) の色と背景色の間のコントラスト比を測定し、そのペアが Web コンテンツ アクセシビリティ ガイドラインを満たしているかどうかを示します。 1:1 から 21:1 の間の単一の数値を報告し、通常と大きなテキスト サイズの両方で AA と AAA の WCAG 2.2 しきい値に照らし合って、それを評価します。さらに、ユーザー インターフェイス コンポーネントとグラフィックスの別の 3:1 のしきい値を設定します。

コントラストとは、2 つの色の相対輝度の違いであり、見た目が異なるだけではありません。 視力が弱い読者や、色覚障害のある読者、または明るい日光の下で電話を使用している人にとっては、2 色がはっきりと感じられることがあります。 この比率は、WCAG によって定義された正確な sRGB 相対輝度式で計算されるため、結果は、大まかな視覚的推測ではなく、監査ツールとスクリーン リーダー ユーザーが経験するものと一致します。

すべてがブラウザで実行されます。 色を 16 進、RGB、HSL、または CSS キーワードとして入力または貼り付け、ライブ テキスト プレビューの更新を監視します。ペアが失敗した場合は、合格した提案された色を適用できます。 何もアップロードされず、サインアップもなく、ページがロードされると、ツールはオフラインで動作します。

WCAG 2 のコントラスト式は相対的な輝度の比率であり、そのしきい値はアクセシビリティ監査とほとんどの法的要件が測定されるものであるため、設計するのに適切な数値であることも知られています。不完全であること: 暗い背景の明るいテキストに寛大で、一部の中間音ペアに厳しい場合があること、そのため、後継アルゴリズムである APCA が存在し、将来のバージョンで試行されていること。大きなテキストにはバーが低く、大きな意味は 18pt、太字の場合は 14pt、つまり 24px と 18.66px 付近です。非テキスト要素は 3:1 で 1.4.11 で個別にカバーされており、これは最も見逃されるルールです。アイコン ボタン、入力境界、フォーカス リングはすべてそれを必要とし、デザインはすべての段落を渡してもフォーム フィールドで失敗する可能性があります。