コントラスト比チェッカー（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 以上 |
使い方のヒント
- 文字色・背景色はカラーピッカーでの選択、または16進数カラーコード（`#RRGGBB`・`#RGB`いずれも対応）の直接入力の両方で指定できます。
- 「色を入れ替える」ボタンを押すと、文字色と背景色を素早く入れ替えて比較できます。ロゴやアイコンの配色案を複数比較する際に便利です。
- AAA基準はAA基準より厳しい水準です。一般的なWebサイトはAA基準への適合が推奨される最低ラインとされていますが、視認性を特に重視するコンテンツにはAAA基準を目指すことが望ましいとされています。
- ボタンの枠線やアイコンなど「UIコンポーネント・グラフィックオブジェクト」の基準（3:1以上）は、WCAG 2.1で新たに追加された達成基準（1.4.11）です。
よくある質問
WCAG（Web Content Accessibility Guidelines）は、Webコンテンツをより多くの人がアクセスしやすくするための国際的なガイドラインです。コントラスト比は、文字色と背景色の明るさの差を1:1（差なし）〜21:1（黒と白の最大差）の数値で表したもので、視覚に障害のある方や高齢者、屋外の明るい場所でスマートフォンを見る場合など、様々な条件下での文字の読みやすさを客観的に評価する指標として使われます。
文字が大きいほど形状の判別がしやすく、多少コントラストが低くても読みやすいと考えられているためです。WCAGでは18ポイント（約24px）以上の通常の文字、または14ポイント（約18.66px）以上の太字を「大きいテキスト」と定義し、通常テキストより緩やかな基準（AA基準で3:1以上）を適用しています。
WCAG 2.1のAA基準は、多くの国・地域の法令やガイドライン（例: 米国のADA、EUのWeb Accessibility Directive等）で参照される最低限の達成基準とされています。AAA基準はさらに高い水準で、必須ではありませんが、特に視認性が重要なコンテンツ（公共機関のサイト等）では推奨されることがあります。
WCAG 2.xでは、まず各色のsRGB値からガンマ補正を除去した「相対輝度（relative luminance）」を計算します。次に明るい方の色の輝度をL1、暗い方をL2として (L1+0.05)/(L2+0.05) という式でコントラスト比を算出します。この計算方法はW3Cの技術仕様として公開されています。
余談ですが ― アクセシビリティ基準が生まれた背景
WCAG（Web Content Accessibility Guidelines）は、W3C（World Wide Web Consortium）が中心となって策定した国際的な指針で、最初のバージョン（WCAG 1.0）は1999年に公開されました。当時からすでに、視覚障害のあるユーザーがスクリーンリーダー等の支援技術を使ってWebを利用する際の障壁を減らすことが大きな課題として認識されていました。
コントラスト比の基準が重視されるようになった背景には、色覚異常（色弱）を持つ人が人口の一定割合（男性で約20人に1人程度とされる）存在すること、加齢に伴い水晶体の黄変等でコントラスト感度が低下すること、屋外の直射日光下でスマートフォン画面が見えにくくなることなど、視覚に関する多様な条件がある点が挙げられます。数値基準を設けることで、デザイナーが主観的な「見やすさ」の判断だけに頼らず、客観的にアクセシビリティを検証できるようになりました。
現在では多くの国でWebアクセシビリティが法令上の要求事項となっており（例: 日本では2024年4月から障害者差別解消法により事業者の合理的配慮の提供が義務化）、コントラスト比のチェックは企業のWebサイト制作において避けて通れない基本的な品質チェック項目の一つになっています。