WCAG カラーコントラスト比チェッカー＆自動補正ツール

コントラスト比チェッカー

テキスト色と背景色のコントラスト比・WCAG 2.1（AA/AAA）適合基準を瞬時に判定。JIS X 8341-3準拠のアクセシビリティ検証や見やすい配色への自動補正に対応。

推奨デザインプリセット:
カラー設定＆測色パラメータ
255, 255, 255
アルファ値（不透明度）100%
H:0° S:0% L:100%
24, 24, 27
H:240° S:6% L:10%
相対輝度（Relative Luminance） 0.0093
タイポグラフィ階層別 適合サイズ判定表通常本文テキスト（18pt未満）
フォントサイズ（px / pt）16px
測色・コントラスト計算パイプライン仕様W3C標準算定式: (L₁ + 0.05) / (L₂ + 0.05)
sRGBステップ1: sRGB入力カラーの正規化（0〜255）C^2.4ステップ2: ガンマ逆補正による線形RGB変換L1/L2ステップ3: CIE 1931 相対輝度（Y/L）の算定Ratioステップ4: コントラスト商 ((L₁+0.05)/(L₂+0.05)) の算出AAAステップ5: WCAG 2.1 AA/AAA 規格合否判定
待機中・リアルタイム測色中前景の相対輝度（L₁） 1.0000 | 背景の相対輝度（L₂） 0.0093
コントラスト比
17.72:1AAA 適合 (PASS)

知覚コントラスト値（Lc）: Lc -106.7

1:14.5:17:121:1

aaNormal

規定しきい値 4.5:1

適合 (PASS)
総合適合判定17.72:1

aaLarge

規定しきい値 3:1

適合 (PASS)
総合適合判定17.72:1

aaaNormal

規定しきい値 7:1

適合 (PASS)
総合適合判定17.72:1

aaaLarge

規定しきい値 4.5:1

適合 (PASS)
総合適合判定17.72:1

uiComponents

規定しきい値 3:1

適合 (PASS)
総合適合判定17.72:1

apcaLc

規定しきい値 60:1

適合 (PASS)
総合適合判定Lc -106.7
計算完了・規格準拠APCA知覚コントラスト（Lc値） -106.7 | 適合スケール 16px (400)
算出コントラスト比
17.72:1
WCAG適合ランク
AAA 適合 (PASS)
APCA知覚コントラスト
Lc -106.7

ブラウザ内リアルタイム処理

ブラウザのメモリ内ですべての測色・コントラスト計算を瞬時に実行。高速かつ安全に動作します。

通信ゼロ・完全プライバシー保護

検証したカラーコードやデザインデータは外部サーバーへ一切送信されず、端末内ローカルで完全に保護されます。

実務対応の即戦力エクスポート

CSS変数、Tailwindクラス、JSONトークンなど、本番環境のスタイルシートにそのまま適用できる形式で書き出せます。

技術リファレンス・アーキテクチャガイド

WCAGコントラスト比ガイド — 技術リファレンス

Webアクセシビリティ標準（WCAG 2.1 / JIS X 8341-3）に基づくテキストと背景色のコントラスト比を即座に計算・検証。適合レベルAA/AAAの合否判定およびアクセシブルな色修正案を提供します。

WCAGコントラスト比ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図
WCAGコントラスト比ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図

主要パラメータと設定項目

相対輝度（L / Relative Luminance）正規化sRGB浮動小数点数（0.000〜1.000）

色空間内の任意の点における相対的な明るさ指標。最暗部の漆黒（#000000）を0.0、最明部の純白（#FFFFFF）を1.0として正規化。IEC 61966-2-1規格に基づくsRGBガンマ展開式（C_linear = C <= 0.04045 ? C/12.92 : ((C+0.055)/1.055)^2.4）とITU-R BT.709の測光係数（L = 0.2126*R + 0.7152*G + 0.0722*B）により導出。

初期値: L1 = 1.000, L2 = 0.038
コントラスト比（CR）測光学的比率（1.00:1〜21.00:1）

(L1 + 0.05) / (L2 + 0.05) の計算式で算出される比率。ここでL1は明るい色の相対輝度、L2は暗い色の相対輝度を表す。定数0.05はスクリーンのガラス表面に反射する標準的な室内環境光（アンビエントフレア）をモデル化した補正値。

初期値: 4.50:1
WCAG レベルAA適合基準法的必須準拠ベンチマーク

標準的な本文テキスト（18pt未満の標準ウェイト、または14pt未満の太字）に対して最低 4.5:1、大きな文字（18pt / 24px以上、または14pt / 18.66px以上の太字）およびUIグラフィカルコンポーネントに対して 3.0:1 のコントラスト比を要求。

初期値: 4.5:1（通常文字）/ 3.0:1（大きな文字）
WCAG レベルAAA適合基準高度アクセシビリティ向上ベンチマーク

標準本文に対して 7.0:1、大きな文字に対して 4.5:1 のより厳格な比率を要求。重度の視覚障害者や、屋外などの強い画面反射・グレア環境下でも確実な可読性を保証。

初期値: 7.0:1（通常文字）/ 4.5:1（大きな文字）

現場のベストプラクティス・実践Tips

0.05環境光定数とサブピクセル・アンチエイリアスの影響

W3Cのコントラスト計算式で双方の輝度に+0.05を加算しているのは、ディスプレイ表面の室内外環境光反射を再現するためです。OSが適用するサブピクセル・フォントレンダリング（Windows ClearTypeやmacOS CoreText）の特性上、極細フォント（font-weight 100〜300）は光学的な濃度が低下します。そのため、計算上4.5:1をクリアしていても視覚的な可読性が損なわれる恐れがあり、実務上はfont-weight 400以上で描画することが不可欠です。

半透明アルファチャンネルによる適合判定の落とし穴

CSSのrgba()や8桁HEXのアルファ透過値を用いると、背面の背景レイヤーに応じてコントラストが動的に変動します。WCAG 2.1では最悪条件下で合成されたピクセルでの適合性評価が義務付けられています。適合認定を行う前に、アルファ合成式（C_out = C_fg * alpha + C_bg * (1 - alpha)）を用いて不透明な背景色とブレンドした完全不透明色として計算してください。

APCAとWCAG 2.1におけるコントラスト極性の非対称性

WCAG 2.1はコントラストを対称的に扱い、「白背景に黒文字」も「黒背景に白文字」も同一の21:1と判定します。しかし実際の人間の視覚系は、瞳孔の収縮とハレーション低減効果により、明背景に暗テキスト（正極性）の配置に対して有意に高い視認性を示します。次世代規格APCA（WCAG 3.0候補）では非対称なLcスコアを算出するため、ライトモードで適合する色ペアであっても、ダークモードではより大きな輝度差が要求される点に注意が必要です。

よくある落とし穴とトラブルシューティング

⚠️ブランドのプライマリカラーが白背景で4.1:1となり、わずかな差でWCAG AAの通常テキスト基準（4.5:1）に不適合となる

ブランドアイデンティティ全体を一から再策定する必要はありません。4.1:1のカラーは3.0:1基準が適用される大見出し（24px以上、または18.66px以上の太字）やインタラクティブUIコンテナの塗りつぶしに限定して使用してください。16pxなどの本文コピーには、本ツールの自動補正（Auto-Fixer）機能を活用し、色相（Hue）と彩度（Chroma）を維持したままHSL明度（Lightness）のみを調整して約4.54:1までトーンを落とすのが最もスマートな解決策です。

⚠️ホバー状態や非活性（disabled）ボタンの視認性が著しく低下し、アクセシビリティ監査で指摘される

WCAG 2.1達成基準1.4.11（非テキストのコントラスト）に基づき、操作可能なUIコンポーネントの境界線や状態表示は隣接する背景に対して最低3.0:1のコントラスト比を維持する必要があります。純粋に非活性なdisabled要素自体は技術的に1.4.11の対象外（例外）とされていますが、UI/UXのベストプラクティスとしては、コントラストを2.5:1未満に落とすのではなく、aria-disabled='true'の明示や無効理由を伝えるツールチップを併用して視認性を確保することが推奨されます。

よくある質問 (FAQ)

WCAGのカラーコントラスト比はどのように計算されますか？▼

WCAG 2.1のコントラスト比は公式 (L1 + 0.05) / (L2 + 0.05) で算出されます。ここでL1はより明るい色の相対輝度、L2はより暗い色の相対輝度です。相対輝度（L）は、8ビットのsRGBカラーチャンネル値（0〜255）をリニア光空間に変換して導出されます：C / 255 <= 0.04045 の場合は (C / 255) / 12.92、それ以外の場合は (((C / 255) + 0.055) / 1.055)^2.4 を計算。これらをITU-R BT.709の視覚感度比に基づき L = 0.2126*R + 0.7152*G + 0.0722*B で重み付け合算します。計算結果は1:1（同色）から21:1（純白#FFFFFFと漆黒#000000の組み合わせ）の範囲に正規化されます。

WCAG レベルAAとAAAのコントラスト基準の違いは何ですか？▼

WCAGレベルAAは、日本のJIS X 8341-3、米国のリハビリテーション法第508条やADA Title III、欧州のEN 301 549など各国の法制度で参照される必須の法的標準です。通常テキスト（18pt / 24px未満の通常、または14pt / 18.66px未満の太字）に最低4.5:1、大きな文字や主要UI要素に3.0:1のコントラスト比を義務付けています。一方、レベルAAAは重度の弱視や高齢者に配慮した拡張目標であり、通常テキストに7.0:1、大きな文字に4.5:1を要求します。一般的なエンタープライズ・デザインシステムでは全域でAA準拠を徹底し、法的免責事項、医療系アプリ、行政告知など極めて重要な箇所にAAAを適用するのが標準的です。

WCAGにおける「大きな文字（Large Text）」の定義基準は何ですか？▼

WCAG 2.1の定義において、「大きな文字」とは18ポイント以上（標準的な96 DPIディスプレイにおける24 CSSピクセル相当）、または太字（font-weight 700以上）の14ポイント以上（約18.66 CSSピクセル相当）のフォントサイズを指します。文字グリフのストローク幅が物理的に広くなることで網膜上で受光する表面積が増加するため、レベルAA適合に必要なコントラスト比は3.0:1（通常文字の4.5:1より緩和）、レベルAAA適合でも4.5:1（通常文字の7.0:1より緩和）に緩和されています。

入力フォームのプレースホルダーや非活性ボタンがコントラスト監査で頻繁に指摘される理由は何ですか？▼

ブラウザ標準のプレースホルダー色（白背景上の#767676等）は4.5:1前後に設定されていることが多いものの、CSSフレームワーク等で不透明度（opacity）が0.4〜0.5に下げられると、実際のコントラスト比が約2.2:1まで激減してしまうためです。WCAG 1.4.3では操作不能な非活性UIコンポーネント（無効化ボタン等）を基準の適用外と定めていますが、フォームのプレースホルダーに入力形式や重要ヒントが含まれている場合は例外扱いされません。一時的なプレースホルダーを常時表示のフローティングラベルや補足テキストに置き換えることで、4.5:1の基準を確実に満たすことができます。

WCAG 2.1と次世代規格APCA（WCAG 3.0）のコントラスト評価の違いは何ですか？▼

WCAG 2.1は相対輝度のみに基づく静的な比率（1:1〜21:1）を採用しており、空間周波数（文字の太さやストローク幅）や視覚極性（ライトモードとダークモードの差異）を考慮していません。これに対し、WCAG 3.0向けに開発されているAPCA（高度知覚コントラストアルゴリズム / Accessible Perceptual Contrast Algorithm）は、人間の網膜視細胞反応と大脳皮質処理をモデル化し、符号付きの明度コントラスト値（Lc 0〜108+）を算出します。APCAでは細いフォントほど高いLc値が要求され、ダークモードではライトモードと同等の可読性を得るためにより大きな輝度差が必要であるといった人間の生理学的知覚を忠実に反映しています。

関連開発者ツール

全ツール一覧 →
壁紙・クロス必要本数計算デザイン

部屋の寸法や開口部（窓・ドア）の控除、柄リピート（ステップ・ストレート）やロス率を考慮し、必要な壁紙クロス（ロール本数・平米数・切り出し寸法）を正確に自動計算します。

ツールを開く→
CSSボックスシャドウ生成デザイン

多重レイヤーのCSSボックスシャドウと自然で滑らかな陰影（エレベーション）を生成。オフセット・ぼかし（Blur）・拡散（Spread）・内側シャドウ（Inset）を調整し、最適化されたCSSコードやTailwindトークンを即座に出力します。

ツールを開く→
CSSクリップパス生成デザイン

直感的なドラッグ操作でカスタムCSS clip-pathポリゴン形状を生成。クロスブラウザ対応のCSSルール、SVGパスコード、レスポンシブな%座標を即座に出力・コピーできます。

ツールを開く→
画像カラーパレット抽出デザイン

画像から主要なカラーパレットを瞬時に抽出。HEX・RGB・HSLスウォッチの生成、CSSやTailwindトークンの書き出し、WCAGアクセシビリティのコントラスト比検証までブラウザ上で完結します。

ツールを開く→
黄金比・黄金長方形計算デザイン

黄金比の寸法と黄金長方形の比率を瞬時に計算。φ（1.618）による調和分割、タイポグラフィのスケール設定、レスポンシブなレイアウトグリッドを生成します。

ツールを開く→
ニューモーフィズムCSS生成デザイン

ニューモーフィズム（Soft UI）の凸面・凹面・インセット陰影を直感デザイン。光の照射角・ぼかし・コントラストをリアルタイムに微調整し、最適化されたCSS・Tailwind・SCSSコードを即座にコピーできます。

ツールを開く→