WCAGコントラストチェッカーガイド：AA/AAA要件と失敗の修正方法

カラーコントラストはウェブで最も一般的なアクセシビリティの失敗です。WebAIMの年次アクセシビリティ分析によると、低コントラストはホームページの80%以上に影響しています。しかし、これは最も簡単に修正できる問題の一つでもあります — ルールを知り、適切なツールを持っていれば。このガイドでは、WCAGコントラスト要件、コントラスト比の仕組み、パレット全体を再設計せずに失敗を修正する方法を説明します。

カラーコントラストとは何か、なぜ重要か？

カラーコントラストは、テキストとその背景の輝度（知覚される明るさ）の差です。高コントラストは、低視力、色覚異常、明るい日差しの下で画面を見るユーザーを含む、すべての人にテキストを読みやすくします。

ウェブコンテンツアクセシビリティガイドライン（WCAG）2.1は、読みやすさを確保するために最小コントラスト比を定義しています。これらの基準を満たすことは、単に良い実践というだけでなく、米国障害者法（ADA）、Section 508、および世界中の同様の法律により法的に義務付けられています。

WCAGコントラスト要件

WCAGはコントラストに対して2つの適合レベルを定義しています：

レベルAA（最小基準）

通常テキスト（18pt未満または14pt太字未満）： 最小比 4.5:1

大きなテキスト（18pt+または14pt+太字）： 最小比 3:1

UIコンポーネントとグラフィックオブジェクト： 最小比 3:1（WCAG 2.1追加）

レベルAAA（強化基準）

通常テキスト： 7:1 最小

大きなテキスト： 4.5:1 最小

ほとんどの組織は基準としてレベルAAを目指しています。AAAは、テキスト中心のアプリケーションや視覚障害のあるユーザー向けの製品に推奨されます。

コントラスト比の計算方法

コントラスト比は、明るい色の相対輝度を暗い色の相対輝度で割ったもので、1:1（コントラストなし）から21:1（白地に黒）の比として表されます。

手動で計算する必要はありません。 WCAGコントラストチェッカーを使用して、複数のカラーペアを瞬時にテストしてください。

例

テキスト	背景	比率	AA通常	AA大	AAA通常
#000000	#FFFFFF	21:1	✅ 合格	✅ 合格	✅ 合格
#767676	#FFFFFF	4.54:1	✅ 合格	✅ 合格	❌ 不合格
#3B82F6	#FFFFFF	3.15:1	❌ 不合格	✅ 合格	❌ 不合格
#1E40AF	#FFFFFF	7.04:1	✅ 合格	✅ 合格	✅ 合格

よくある失敗と修正

白地に薄いグレーのテキスト

失敗： 白地にcolor: #999999 = 2.85:1 — AA不合格。 修正： AAは#767676（4.54:1）、AAAは#595959（7.0:1）に暗くします。

白地にブランドカラー

失敗： 白地にcolor: #3B82F6（Tailwind blue-500） = 3.15:1 — AA通常テキスト不合格。 修正： 大きなテキストのみに使用するか、本文テキストには#1E40AF（blue-700, 7.04:1）に暗くします。

一括コントラストチェッカーを使用して、パレット全体を数秒でテストしてください。