コントラスト比チェッカー（WCAG 2.1 AA/AAA 対応）

WCAG（Web Content Accessibility Guidelines）2.1 は、W3C が策定する Web アクセシビリティの国際標準規格です。コントラスト比に関する基準は 達成基準 1.4.3（最低限のコントラスト）と 1.4.6（高コントラスト）で定められています。

大テキスト（Large Text）の定義

• 18pt（24px）以上の通常ウエイト
• 14pt（約18.67px）以上の太字（bold）
• 日本語の場合も同じピクセル数基準が適用される

適用が免除されるケース

• 装飾目的のみのテキスト（内容を伝えない純粋な装飾）
• 操作不能で非アクティブなUI要素
• 企業ロゴやブランドロゴ内のテキスト
• 写真などの自然画像の一部として含まれるテキスト

WCAG で定義されたコントラスト比は次の2ステップで計算されます。

Step 1: 相対輝度（Relative Luminance）を求める

まず sRGB の色値（0〜255）を 0〜1 に正規化し、ガンマ補正を除去してリニア値に変換します。

// sRGB 正規化
let c = channel / 255;

// リニア化（ガンマ補正除去）
let linear = (c <= 0.04045)
  ? c / 12.92
  : Math.pow((c + 0.055) / 1.055, 2.4);

// 相対輝度（WCAG 2.1 式）
L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

係数の意味: 緑（0.7152）が最も輝度への寄与が大きく、赤（0.2126）、青（0.0722）の順に続きます。これは人間の目の感度特性に基づいています。

Step 2: コントラスト比（Contrast Ratio）を求める

// L1 = 明るい方の相対輝度、L2 = 暗い方
ContrastRatio = (L1 + 0.05) / (L2 + 0.05)

// 例: 白(L=1.0) vs 黒(L=0.0)
= (1.0 + 0.05) / (0.0 + 0.05) = 21:1（最大値）

// 例: #3B7DEF vs #FFFFFF
= (1.0 + 0.05) / (0.1612 + 0.05) ≈ 4.97:1（AA 通常 ✅）

コントラスト比の範囲

• 1:1 — 最小値（前景色と背景色が同色）
• 4.5:1 — AA 通常テキスト基準
• 7:1 — AAA 通常テキスト基準
• 21:1 — 最大値（白 vs 黒）

基本ルール

• 明度の差を大きく: 色相が異なっても明度が近いと低コントラストになる。HSLの L 値を離す。
• 純色（彩度100%）は要注意: 赤・緑・青の純色同士は輝度が近い場合が多い。必ず数値確認を。
• グレースケールで確認: 色覚に関わらず、グレーに変換したときに明暗の差があれば安全。
• テキストは黒か白に近い色を使う: #1B2434（濃紺）on 白背景は約14:1 以上を確保できる。

カラーシステムを持つデザインの場合

デザインシステムでは、プライマリカラーを明度スケールで整理すると管理しやすいです。

自動改善のアプローチ

• 前景色を暗くする: HSL の L 値を下げて輝度差を広げる（テキスト色の調整に有効）
• 背景色を明るくする: L 値を上げて白に近づける（カード背景に有効）
• ブランドカラーは背景/アクセントに留める: 読む文字には使わず、周囲に十分な余白を置く

日本では男性の約5%、女性の約0.2%が色覚異常（先天性色覚多様性）を持ちます。Webデザインでは色だけに情報を依存しないことが重要です（WCAG 達成基準 1.4.1）。

主な色覚タイプ

色覚に依存しないデザインの実践

• アイコン・パターン・テキストを併用: 緑=OK / 赤=NG だけでなく ✅ / ❌ アイコンや「合格」「不合格」テキストを併記
• 形状・太さで区別: グラフは色だけでなく、ダッシュパターンや形状マーカーを使う
• 彩度を下げた確認: グレースケールで情報の読み取りが可能か確認する
• 赤×緑の組み合わせを避ける: 最も多いプロタノピア/デューテラノピアへの配慮として特に重要
• 青×黒も要注意: リンク色（青）とテキスト（黒）の区別に下線などの視覚的補助を追加する

当ツールのシミュレーション方式

Brettel 等の数学的変換行列（CIE XYZ 色空間を経由）を使用した高精度な色覚シミュレーションを実装しています。実際の色覚当事者がどのように見るかの近似値です。

日本国内

• 障害者差別解消法（2016年施行・2024年改正）: 民間事業者にも「合理的配慮」の提供が義務化。Web アクセシビリティも対象範囲に含まれると解釈されつつある。
• JIS X 8341-3:2016: WCAG 2.0 ベースの日本産業規格。政府・地方公共団体のWebサイトは AA 準拠が義務。
• デジタル庁「ウェブアクセシビリティ導入ガイドブック（2023年）」: WCAG 2.1 AA を達成目標として明示。民間企業にも普及推進中。

米国

• ADA（Americans with Disabilities Act）: 商業施設に準じ、公共向けWebサイトも対象とする訴訟が増加。WCAG 2.1 AA を実質的な基準として参照。
• Section 508: 連邦政府機関のシステムに WCAG 2.1 AA 準拠を義務付け。2024年改定により強化。

EU

• 欧州アクセシビリティ法（EAA / European Accessibility Act）: 2025年6月28日から施行。EU市場向けの製品・サービスに広くアクセシビリティ基準を義務化。EC向けECサイト・アプリも対象。
• EN 301 549: WCAG 2.1 AA を参照する EU 規格。