WCAG 2.1アクセシビリティ基準を満たすために2色間のコントラスト比を確認します。通常テキストと大きなテキストの両方でAAおよびAAAレベルをテストし、リアルタイムプレビューを提供します。
カラーピッカーを使用するかHEX値を入力して、テキスト/前景色を入力または選択してください。これは通常テキストの色です。
背景色を入力または選択してください。必要に応じてスワップボタンを使用して前景と背景をすばやく入れ替えてください。
コントラスト比とWCAGコンプライアンスバッジを確認してください。緑のバッジは合格、赤は不合格を示します。すべてのテキストで少なくともAAコンプライアンスを目指してください。
プレビューセクションを使用して、デザインに実装する前に実際のテキストでカラーの組み合わせがどのように見えるかを確認してください。
WCAG（ウェブコンテンツアクセシビリティガイドライン）は、視覚障害のある人々がコンテンツを読めるようにするためのコントラスト要件を定義しています。レベルAAは通常テキストで4.5:1、大きなテキストで3:1を要求します。レベルAAAはそれぞれ7:1と4.5:1を要求します。
相対輝度は、公式L = 0.2126R + 0.7152G + 0.0722Bを使用して色の知覚される明るさを測定します。係数は人間の目の感度を反映しており、緑が最も顕著です。計算前にsRGBから線形化されます。
コントラスト比の公式は：(L1 + 0.05) / (L2 + 0.05)です。L1は明るい色の輝度、L2は暗い色の輝度です。0.05のオフセットはゼロ除算を防ぎ、周囲光を考慮します。
大きなテキストは、18pt（24px）の通常ウェイトまたは14pt（18.5px）の太字として定義されます。大きなテキストは、サイズが大きいため自然に読みやすく、コントラストが低くても要件が低くなっています。
男性の約8%、女性の約0.5%が色覚異常を持っています。低コントラストのテキストは、高齢者、明るい日光の下、または低品質のディスプレイでも読みにくくなります。良好なコントラストは全ての人に恩恵をもたらします。
コントラスト比は2つの色の輝度（明るさ）の差を測定します。1:1（コントラストなし、同じ色）から 21:1（最大コントラスト、白地に黒）の範囲です。比率が高いほど読みやすさとアクセシビリティが向上します。
これは通常の段落テキストです。良いコントラストは、視覚障害のある方を含むすべてのユーザーの読みやすさを確保します。
これは読みやすさのためにさらに良いコントラストが必要な小さいテキストです。
コントラスト比
ペアをクリックして前景色/背景色として使用
Saved Presets is a Supporter feature.
Tool History is a Supporter feature.
Tool Notes is a Supporter feature.
