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

使い方

このツールはWCAG 2.1ガイドラインに従って2色のコントラスト比を計算し、カラーコンビネーションがアクセシブルかどうかを示します。

使い方：

1. テキストカラーと背景色を16進数、RGBまたはカラーピッカーで入力します。
2. ツールが即座にコントラスト比を表示します。
3. 結果がAA（通常テキストで4.5:1）またはAAA（7:1）レベルを満たすか確認します。

例：黒いテキスト（#000000）を白い背景（#FFFFFF）に → コントラスト比21:1（AAA）。

制限事項：このツールはテキスト/背景のコントラストのみを評価します。すべてのWCAGアクセシビリティ基準を網羅するものではありません。

プライバシー：データは送信されません。すべてローカルで計算されます。

実践例

白背景にグレー文字 #767676 をチェックすると:コントラスト比はちょうど4.54:1 — 通常テキストの WCAG AA(4.5:1必要)には合格、AAA(7:1)には不合格で、結果カードは大きい文字の緩和ルールも含め各しきい値を個別に表示します。対数スケールバーは、この組み合わせが1:1から純黒白の21:1の間のどこにあるかを示します。APCA カードは WCAG 3 の指標を先取りし、入替ボタンは前景と背景の反転が効くかを即答。ライブプレビューは実テキストを描画するので、自分の目で判断できます。

活用シーン

• ウェブサイトのリデザイン公開前にブランドカラーパレットのアクセシビリティ準拠を確認する
• ダークまたはライトテーマで読みやすいボタンやリンクの色を選ぶ
• Section 508、EN 301 549、ADAへの準拠のためにWCAG 2.1 AAまたはAAA要件を満たす
• 開発開始前にデザイナーから送られたモックアップを確認し、読めないテキストを指摘する
• 小さな輝度差がどのようにして大きなコントラスト失敗を引き起こすかを示してアクセシビリティを教える