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

アクセシビリティのためにWCAG 2.1コントラスト比をテストします。

あなたのデータはデバイスを離れません
大きなテキスト(24 px太字)
16 pxの通常テキスト · いろはにほへと ちりぬるを わかよたれそ つねならむ。
-
コントラスト比
AA 通常
≥ 4.5:1
-
AA 大
≥ 3:1
-
AAA 通常
≥ 7:1
-
AAA 大
≥ 4.5:1
-

使い方

  1. 前景(テキスト)の色と背景の色を選択します。
  2. コントラスト比が即座に更新されます。
  3. 通常テキストと大きなテキストのWCAG等級(AA/AAA)を確認します。
  4. 「入れ替え」をクリックして色を交換します。

よくある質問

WCAGとは?

WCAG(Web Content Accessibility Guidelines)は、ウェブコンテンツをアクセシブルにするための国際標準です。レベルAAが最も一般的に要求される基準です。レベルAAAが最高です。

「大きなテキスト」とは何ですか?

大きなテキストは、最低18 pt(24 px)または太字で14 pt(18.66 px)と定義されています。読みやすいため、コントラスト要件が低くなります。

どのコントラスト比を目指すべきですか?

本文テキストには、少なくとも4.5: 1(AA)を目指してください。最良のアクセシビリティのためには、7: 1(AAA)を目指します。見出しと大きなテキストには少なくとも3: 1が必要です。

WCAGが実際に測定するもの

ウェブアクセシビリティにおける「コントラスト」は「色の見た目の違い」ではなく、2色間の相対輝度の正確な比率だ。輝度とは、典型的な視力を持つ観察者に色がどの程度明るく見えるかを近似した知覚的尺度だ。比率は1:1（輝度が同一で互いに見えない2色）から21:1（純粋な黒 #000000 と純粋な白 #ffffff）まで及ぶ。WCAGの3つの規範的な達成基準がこの比率を使用する：

4.5:1という下限は恣意的ではない。WCAGの導出式は通常視力向けの3:1 ANSIベースラインを、視力20/40（法的「ロービジョン」の定義に使われる閾値）のユーザー向けに1.5倍した値を使用する。4.5 = 3 × 1.5。レベルAAAの7:1閾値は同じ論理を視力20/80程度まで拡張する。ロゴ、ブランド名、付随的または装飾的なテキストは免除されるが、それ以外のすべてが対象となる。

計算式

WCAGテクニックG18のコントラスト計算式は3ステップある。入力は8ビットのsRGBチャンネル値（0〜255）で、各値をまず0〜1の範囲に変換する：

  1. sRGBを線形化する（ガンマ曲線を元に戻す）。各チャンネル値Vに対して：V ≤ 0.04045の場合、V_linear = V ÷ 12.92；それ以外の場合、V_linear = ((V + 0.055) ÷ 1.055)^2.4。（古いWCAG文書では0.03928を使用していたが、W3Cは正式なsRGB仕様に合わせて0.04045に正誤表を更新した。数値的な差は無視できる。）
  2. 相対輝度を計算する：L = 0.2126·R + 0.7152·G + 0.0722·B（線形化済み）。係数はCIE 1931標準観察者の明所視感度関数に由来する。人間の目は緑（約71%）に最も敏感で、次いで赤（約21%）、青（約7%）の順だ。これが白背景上の純粋な青テキストが、色として大きく異なるにもかかわらずコントラストに失敗する理由だ。
  3. 比率を計算する：(L1 + 0.05) ÷ (L2 + 0.05)（L1が明るい色、L2が暗い色）。0.05オフセットは典型的なディスプレイの周辺光フレアをモデル化し、一方の色が黒に近い場合に比率が発散するのを防ぐ。

白背景上の黒の計算例：白はL = 1.0、黒はL = 0なので、比率は(1 + 0.05) ÷ (0 + 0.05) = 21。これはsRGBで可能な最大コントラストだ。

「大きなテキスト」とは何か

WCAGは大きなテキストを18ポイント（通常のウェイト）以上または14ポイント太字以上と定義している。W3C規定の1pt = 1.333pxでCSSピクセルに換算すると：

ほとんどのブラウザのデフォルト本文テキストは16px / 12ptであり、大きなテキストではない。よくある誤りはすべての見出しを大きなテキストとして扱うことで、18px通常ウェイトで設定された <h3> は依然として4.5:1の通常テキストルールに該当する。

有名なエッジケース：白背景上の#767676

最小主義を追求するデザイナーは本文テキストに中程度のグレーを選びがちだ。目には同一に見える2つの値がWCAGの境界線の両側に位置する：

前景色背景色比率AA 通常
#000000#ffffff21.00合格（最大）
#595959#ffffff~7.0合格 + AAA
#767676#ffffff4.54合格（ぎりぎり）
#777777#ffffff4.48不合格
#959595#ffffff3.00不合格（大きなテキストのみ）
#ffff00#ffffff1.07不合格

1文字の16進シフト（#767676 と #777777 の差）が、同じ見た目のグレーを合格から不合格に変える。WCAGは比率を切り上げることを明示的に禁じているからだ。WebAIMは #777777 をAA基準を満たさない「よく使われるグレーの色調」と名指ししている。このひとつの落とし穴が実際のサイトスキャンで自動監査の失敗の相当な割合を占めている。

計算式の限界

相対輝度の計算式は高速で確定的だが、文書化されたいくつかの知覚的な欠陥がある：

APCA（Accessible Perceptual Contrast Algorithm）はWCAG 3向けにプロトタイプされている候補の代替手法だ。おおよそ−108から+106の単一の符号付きLc値を返し、極性を認識し、フォントウェイト・サイズの参照表を含む。APCAは現在ベータの非商用リファレンスであり、法的適合ターゲットではない（本番サイトは引き続きWCAG 2.1 / 2.2 AAを対象にすべきだ）。しかし特にダークモードでより正確な読みやすさチェックを提供する。Chrome DevToolsのカラーピッカーにAPCAプレビューが組み込まれている。

なぜこれが法的に重要か

WCAG 2.2は2023年10月5日にW3C勧告となったが、コントラスト基準は2.1から変更なく引き継がれている。色のコントラストはデジタルアクセシビリティ訴訟で最も多く引用される問題のひとつで、複数の法域で事実上義務化されている：

色のコントラストと色覚障害

よく混同されるが、WCAGの比率は輝度ベースであり、ほとんどの色覚障害者にも有用だ。輝度から導出された4.5:1比率は、色相の手がかりが失われても強い知覚的シグナルに対応する。そのためコントラスト基準は独立した基準1.4.1 色の使用と並置されており、情報を色だけで伝えることを禁じている。コントラストは赤・緑のチャートが二色覚者に読めるかは教えてくれず、各色が個別にチャートの背景とコントラストをとっているかだけを教える。チャートや状態変化を持つUIには色の上にパターン、ラベル、または図形を重ねる必要がある。

実践的なチェックリスト

よくある質問

純粋な黄色が白背景で不合格になる理由は？

黄色（#ffff00）は白背景に対して1.07:1で、コントラストはほぼゼロだ。輝度計算式は緑を71%、赤を21%で重み付けするため、黄色（R+G）の輝度は白に非常に近い。一方、黒背景上の黄色は19.56:1で既知の最も読みやすい組み合わせのひとつだ。道路標識や安全ヘルメットの警告に使われる理由でもある。

常にAAAを目標にすべきですか？

いいえ。WCAG自体が述べている：「コンテンツによっては、すべてのレベルAAAの達成基準を満たすことが不可能なため、サイト全体のポリシーとしてレベルAAA適合を要求することは推奨されない。」AAはほぼどこでも法的なターゲットだ；AAAは高度な情報読書（長文コンテンツ、一般公衆向け政府文書、アクセシビリティ優先の出版物）向けだ。

自動ツールはすべてのコントラストの失敗を検出できますか？

いいえ。axe-core、Lighthouseなどの監査ツールはフラットカラー上のテキストの失敗を確実にフラグするが、背景画像上のテキスト、CSSグラデーション、疑似要素の背景、またはCSSボーダーカラーはテストできない。これらは「未完了」とフラグされ、手動レビューが必要だ。このようなライブピッカーは画像から支配的な背景色をサンプリングし、出荷前にテキスト・背景ペアだけを確認するのに独自に有用だ。

このツールは透明度・アルファをサポートしていますか？

このページは不透明な16進ペアを検査する。テキストまたは背景にアルファが使われている場合、実際のコントラストはその背後にある色に依存する。合成された前景色を最初に計算し、結果として得られる不透明な色を確認する必要がある。

何かサーバーに送信されますか？

いいえ。輝度の計算式と比率はブラウザで計算される；色はデバイスから出ない。ページは読み込み後オフラインで動作する。

関連ツール

カラーコンバーター 無料オンラインカラーパレット生成ツール CSSグラデーションジェネレーター