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

カラーコントラストチェッカー - WCAGアクセシビリティツールとは？

カラーコントラストチェッカーは、ウェブアクセシビリティ用のユーティリティです。前景色（テキスト）の相対的な輝度を背景色と比較して、視覚障害のあるユーザーがテキストを快適に読むのに十分な視覚的差があるかどうかを数学的に評価します。

カラーコントラストチェッカー - WCAGアクセシビリティツールの使い方

1. テキスト／前景色のHEXコードを入力してください。
2. 背景色のHEXコードを入力してください。
3. このツールはコントラスト比（例：4.5:1）を計算します。
4. WCAG AAおよびAAA基準に対する合格/不合格の評価を表示します。

例

あなたは純粋な黒のテキスト（#000000）を純粋な白の背景（#FFFFFF）でテストします。このツールは、正確に21:1の最大可能なコントラスト比を計算し、すべてのAAAアクセシビリティ要件を簡単にクリアします。

結果の見方

比率が高いほど、テキストは読みやすくなります。ウェブコンテンツアクセシビリティガイドライン（WCAG）は、通常のテキストに対しては最低4.5:1（AA基準）、厳しいアクセシビリティに対しては7:1（AAA基準）を要求しています。

一般的な用途

• ウェブアクセシビリティ監査：企業のウェブサイトが読みやすさに関するADA準拠法に違反していないことを確認すること。
• UI/UXデザイン：白い入力フィールド内の薄いグレーのプレースホルダーテキストが読みづらすぎないかを確認する。
• ブランドガイドライン: マーケティング用グラフィックでブランドカラーを互いに安全に重ねて使用できるか確認すること。

仕組み

このツールは、両方のHEXコードをRGBに変換し、特定の数学的な公式を適用して両方の色の「相対輝度」を計算し、その後明るい方の輝度を暗い方の輝度で割ります。結果は1:1（コントラストなし）から21:1（最大コントラスト）までの比率として表されます。