コントラストチェッカー：WCAGコントラスト比計算機

このツールの機能と主な特徴

コントラストチェッカーは、2つの色のWCAGコントラスト比を計算するのに役立つウェブツールです。リアルタイムで結果を提供し、WCAG基準（AA、AAラージ、AAA）に従って色のコントラストを評価します。

使用方法のステップバイステップガイド

1. コントラストチェッカーツールを開きます。
2. カラーピッカーをクリックするか、テキストフィールドに16進コードを入力して、前景（テキスト）の色を選択します。
3. カラーピッカーをクリックするか、テキストフィールドに16進コードを入力して、背景色を選択します。
4. コントラスト比と評価がリアルタイムで表示されます。

基礎となる計算式/技術ロジック

コントラスト比は、以下の式を使用して計算されます。

コントラスト比 = (L1 + 0.05) / (L2 + 0.05)

ここで、L1とL2はそれぞれ前景と背景色の相対輝度値です。

実用的な実世界の例

• 例1: 前景: #000000 (黒)、背景: #ffffff (白) コントラスト比: 21.00、評価: AAA
• 例2: 前景: #ffffff (白)、背景: #000000 (黒) コントラスト比: 21.00、評価: AAA
• 例3: 前景: #808080 (グレー)、背景: #ffffff (白) コントラスト比: 4.50、評価: AA

比較または決定マトリックス/チェックリスト

コントラスト比	WCAG評価
≥ 7.00	AAA
≥ 4.50	AA
≥ 3.00	AAラージ

よくある間違いとその回避方法

• 間違い: コントラスト比の低い色を使用する。 回避方法: デザインで色を使用する前に、常にコントラスト比と評価を確認してください。
• 間違い: 色のコントラストに関するWCAGガイドラインを無視する。 回避方法: コントラストチェッカーを使用して、デザインがアクセシビリティに関するWCAG基準を満たしていることを確認してください。