コントラスト比チェッカー（WCAG基準判定）
2色を指定すると、WCAG（Web Content Accessibility Guidelines）のコントラスト比を計算し、AA・AAA基準への適合を判定します。
WCAG コントラスト比基準の目安
| 基準レベル | 対象 | 必要なコントラスト比 |
|---|---|---|
| AA（最低限） | 通常テキスト | 4.5:1 以上 |
| AA（最低限） | 大きいテキスト（18pt以上、または14pt以上の太字） | 3:1 以上 |
| AA（最低限） | UIコンポーネント・グラフィックオブジェクト | 3:1 以上 |
| AAA（高水準） | 通常テキスト | 7:1 以上 |
| AAA（高水準） | 大きいテキスト | 4.5:1 以上 |
コントラスト比とは
コントラスト比とは、文字色と背景色の明るさの差を1:1（差なし）〜21:1（黒と白の最大差）の数値で表したものです。数値が大きいほど文字が読みやすくなり、WCAG（Web Content Accessibility Guidelines）はこの数値に基づいてAA・AAAという2段階の合格基準を定めています。このツールは2色のカラーコードから比率を自動計算し、5つの基準への適合・不適合を一目で確認できるようにします。
計算の土台になっているのは「相対輝度（relative luminance）」という値です。単純な明度（HSLのL値など）ではなく、sRGBのガンマ補正を取り除いた上で赤・緑・青それぞれの人間の目に対する感度の違いを重み付けして合算するため、見た目の印象に近い明るさが得られます。似た色同士は数値上のコントラスト比が低くなりがちなので、判定が「不合格」でも色そのものが間違っているわけではなく、明度差を広げる必要があると捉えてください。
コントラスト比チェッカーの使い方
- 文字色を入力する カラーピッカーで選ぶか、16進数カラーコードを直接入力します。既定値は濃いグレー（#333333）です。
- 背景色を入力する 同様にカラーピッカーまたは16進数カラーコードで指定します。既定値は白（#ffffff）です。
- 計算結果を確認する 入力するとリアルタイムでコントラスト比と、AA・AAA各基準への合格・不合格バッジが表示されます。
- 必要に応じて色を入れ替える 「色を入れ替える」ボタンで文字色と背景色を反転し、配色案を逆パターンでも比較できます。
使いこなすためのヒント
- 文字色・背景色はカラーピッカーでの選択、または16進数カラーコード（`#RRGGBB`・`#RGB`いずれも対応）の直接入力の両方で指定できます。
- 「色を入れ替える」ボタンを押すと、文字色と背景色を素早く入れ替えて比較できます。ロゴやアイコンの配色案を複数比較する際に便利です。
- AAA基準はAA基準より厳しい水準です。一般的なWebサイトはAA基準への適合が推奨される最低ラインとされていますが、視認性を特に重視するコンテンツにはAAA基準を目指すことが望ましいとされています。
- ボタンの枠線やアイコンなど「UIコンポーネント・グラフィックオブジェクト」の基準（3:1以上）は、WCAG 2.1で新たに追加された達成基準（1.4.11）です。
こんな場面で使われています
ボタンやリンクの配色チェック
サイトの主要な操作ボタンやテキストリンクの文字色と背景色を入力し、AA基準（4.5:1以上）を満たしているか確認する用途です。
ロゴ・バナーの背景色との組み合わせ確認
ロゴの色や訴求バナーのコピー文字が、掲載する背景色の上で十分な視認性を保てているかを事前に検証できます。
デザインシステムのカラーパレット監査
既存のブランドカラーとテキストカラーの組み合わせを一つずつ入力し、UI全体でアクセシビリティ要件を満たしているかを棚卸しする作業に使えます。
ダークモード配色の検証
ダークモード用に反転させた配色が、ライトモードと同様にコントラスト基準を満たしているかを個別に確認する場合に役立ちます。
用語集
- 相対輝度（relative luminance）
- sRGBのガンマ補正を除去した上で、赤・緑・青の感度の違いを重み付けして合算した明るさの指標です。コントラスト比の計算の基礎になります。
- コントラスト比
- 明るい色と暗い色の相対輝度から算出される、1:1〜21:1の数値です。値が大きいほど2色の明暗差が大きく、文字が読みやすいことを示します。
- WCAG
- Web Content Accessibility Guidelinesの略称で、W3Cが策定するWebアクセシビリティの国際的な指針です。コントラスト比の合格基準もこの中で定義されています。
- AA基準
- WCAGにおける2番目に高い達成レベルで、通常テキストは4.5:1以上のコントラスト比が必要です。多くの法令やガイドラインが参照する最低限の目標水準とされています。
- AAA基準
- WCAGで最も高い達成レベルで、通常テキストは7:1以上のコントラスト比が必要です。必須ではありませんが、視認性を特に重視する場合に推奨されます。
- 大きいテキスト
- WCAGが定義する、18ポイント（約24px）以上の通常文字、または14ポイント（約18.66px）以上の太字を指す区分です。通常テキストより緩やかな基準が適用されます。
- UIコンポーネント
- ボタンの枠線や入力欄の輪郭、アイコンなど操作対象を示す視覚要素のことです。WCAG 2.1で3:1以上のコントラスト比の基準が新たに追加されました。
よくある質問
余談ですが ― アクセシビリティ基準が生まれた背景
WCAG（Web Content Accessibility Guidelines）は、W3C（World Wide Web Consortium）が中心となって策定した国際的な指針で、最初のバージョン（WCAG 1.0）は1999年に公開されました。当時からすでに、視覚障害のあるユーザーがスクリーンリーダー等の支援技術を使ってWebを利用する際の障壁を減らすことが大きな課題として認識されていました。
コントラスト比の基準が重視されるようになった背景には、色覚異常（色弱）を持つ人が人口の一定割合（男性で約20人に1人程度とされる）存在すること、加齢に伴い水晶体の黄変等でコントラスト感度が低下すること、屋外の直射日光下でスマートフォン画面が見えにくくなることなど、視覚に関する多様な条件がある点が挙げられます。数値基準を設けることで、デザイナーが主観的な「見やすさ」の判断だけに頼らず、客観的にアクセシビリティを検証できるようになりました。
現在では多くの国でWebアクセシビリティが法令上の要求事項となっており（例: 日本では2024年4月から障害者差別解消法により事業者の合理的配慮の提供が義務化）、コントラスト比のチェックは企業のWebサイト制作において避けて通れない基本的な品質チェック項目の一つになっています。