WCAGコントラストチェッカー
アクセシビリティはもはや「あれば良い」機能ではありません。多くの国でWCAGのカラーコントラスト基準への準拠が法的に求められており、無視すれば法的リスクにつながることもあります。このツールを使えば、色の組み合わせが基準を満たしているかどうかと、どれくらい差があるかがすぐにわかります。
テキストカラーと背景色を選ぶだけで、AAとAAAの両レベルの判定結果が表示されます。登録不要、インストール不要です。
コントラスト比
21:1
大きなテキスト（18pt以上）
通常のテキストはこのように表示されます。素早い茶色のキツネは怠惰な犬を飛び越える。
WCAG 2.1 準拠
AA - 通常テキスト
最小比率 4.5:1 が必要
AA - 大きなテキスト
最小比率 3:1 が必要
AAA - 通常テキスト
最小比率 7:1 が必要
AAA - 大きなテキスト
最小比率 4.5:1 が必要
WCAGコントラスト基準とは何か
ウェブコンテンツアクセシビリティガイドライン（WCAG）は、視覚障害のある人でもテキストを読めるよう、最低限のコントラスト比を定めたものです。男性のおよそ12人に1人、女性の200人に1人が何らかの色覚特性を持っているとされており、さらに多くの人が弱視を抱えています。コントラストが低いテキストは、こうした人たちにとって読むことが困難です。
コントラスト比の仕組み
コントラスト比は2つの色の明るさの差を数値化したものです。1:1（コントラストゼロ、同じ色）から21:1（最大コントラスト、純黒と純白）までの範囲があり、数値が高いほど読みやすくなります。
WCAGの各レベルを理解する
レベルAA（標準的な要件）
多くのウェブサイトが満たすべき基本レベルです。要件は以下の通りです：
- 通常のテキスト：最小コントラスト比 4.5:1
- 大きなテキスト（18pt以上、または14pt以上の太字）：最小コントラスト比 3:1
レベルAAA（強化された要件）
より高いアクセシビリティを実現するための厳しい基準です：
- 通常のテキスト：最小コントラスト比 7:1
- 大きなテキスト：最小コントラスト比 4.5:1
このツールが見つけやすいミス
白背景に薄いグレーのテキスト
デザイナーはスッキリした印象のために薄いグレーをよく使いますが、白背景の#999999はAAに不合格です。合格には少なくとも#767676が必要で、本文テキストならさらに濃いグレーを使う方が望ましいです。
テキストとして機能しないブランドカラー
ロゴや見出し装飾では映えるビビッドなイエローや明るいグリーンも、白背景のテキストとして使うとコントラスト不足になることが少なくありません。見た目は問題なさそうに見えても、測定すると不合格というケースが多いです。
画像の上に置いたテキスト
写真の上の白いテキストは、画像の明るい部分でコントラストが失われがちです。このツールで適切なオーバーレイカラーを探せば、どの箇所でも読みやすさを保てます。
フォームのプレースホルダー
入力欄のプレースホルダーは薄いグレーで表示されることが多いです。WCAGがプレースホルダーに直接適用されるかどうかは議論が続いていますが、読みやすくするのは良いUXの基本です。
不合格だったときの対処法
判定が不合格だった場合、主に次のアプローチが有効です：
- テキストを暗くする — 明るいテキストカラーを数段階濃くするだけで基準をクリアできることもあります
- 背景を明るくする — 背景色側で調整する方法です
- フォントサイズを大きくする — 大きなテキストは要件が緩いため、サイズ変更だけで解決することもあります
- オーバーレイを追加する — 画像の上にテキストを置く場合、半透明の背景を敷くとコントラストを確保しやすくなります
法的な要件
複数の国でWCAGへの準拠が義務づけられています：
- 米国 — ADAとSection 508がWCAGを参照しています
- EU — EN 301 549はWCAG 2.1 AAを要求しています
- 英国 — 公共機関のウェブサイトはWCAG 2.1 AAを満たす必要があります
法的義務がない場合でも、WCAG準拠は法的リスクを下げ、より多くの人がサイトを使えるようにする実用的な取り組みです。アクセシビリティへの小さな投資が、長い目で見ると大きな差を生みます。