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

WCAG 2.1 の基準値 — 3 コンテキスト・2 レベル

WCAG 2.1 では、要求されるコントラスト比はテキストの大きさと達成 レベルの 2 変数で決まります。AA は欧州 EAA、米国 Section 508、 日本 JIS X 8341 など多くの規制が実質的に要求する水準です。AAA は より厳しい理想で、純粋なテキストでは達成できても UI クロームでは 到達が難しい場合があります。UI 部品や非テキストの視覚的指標は AA のみで 3 : 1 とされ、AAA の基準は規格自身が意図的に未設定の ままです。

コントラスト比はどう計算されるか

WCAG 2.x のコントラストは 2 色の相対輝度から計算されます。相対 輝度は明るさを 0 〜 1 の範囲で知覚的に近似した値です。各色について、 sRGB のチャンネル値を 255 で割り、0.03928 付近を境界とする区分 関数でガンマを復号し、R = 0.2126、G = 0.7152、B = 0.0722 という チャンネル重みで合成します。重みは人間の眼の感度に基づきます。 緑が最も大きいのは、緑感受性錐体が知覚される明るさに最も寄与する ためです。

比そのものは (L1 + 0.05) / (L2 + 0.05) で、L1 は輝度の高いほうの 値です。0.05 は規格が周囲光の画面反射を見込むための定数です。 これが無いと、純黒背景に対して任意の非黒前景を置けば比が無限大 になってしまいます。出力は 1 : 1 (同一) から理想ディスプレイ上の 純白対純黒で約 21 : 1 までの範囲です。上のツールが表示するのは この間のいずれかの値です。

色覚特性とデザインへの影響

ヨーロッパ系では男性の約 8%、女性の約 0.5% が何らかの色覚特性を 持ち、内訳は民族により異なります。主な型と影響:

高いコントラストは全般に役立ちますが、すべての課題を解決する訳 ではありません。輝度が等しい 2 色 (等輝度色) はコントラスト比が 1 : 1 となり、全色盲には完全に見分けがつきません。赤緑系の特性 では、輝度が揃った赤と緑の組み合わせがほぼ同じに見えることが あります。AA を満たすことは必要条件であって十分条件ではない、 という点を押さえてください。色選びと組み合わせは別の次元で重要 です。

基準を超えた先のデザイン — 色だけに頼らない

最も効くパターンは「色 + 形」です。色だけで情報を符号化しない ことです。「成功なら緑、エラーなら赤」のステータスバッジには アイコンや単語も併用します。必須項目は赤色だけでなくアスタリスク を付け、aria-required で表現します。線種が色相だけで区別される チャートにはラベル・ストロークパターン・直書きの注釈を加えます。 これらの工夫はモノクロ印刷・直射日光下・ディスプレイのバックライト 劣化など、誰の目にも効きます。

操作要素では、テキスト内側のコントラストと同程度にフォーカス リングのコントラストも重要です。テキスト側のコントラストが優秀 でも、フォーカスリングが 1 : 1 のボタンはキーボードユーザーに 対して壊れています。多くのデザインシステムはプライマリボタン ではこれを守るのに、セカンダリやゴースト系のバリアントで落とし がちです。明示的に検査する価値があります。

WCAG 3 と APCA — 4.5 : 1 の先に来るもの

WCAG 2 のコントラスト式は知覚モデルとして十分でないと長く批判 されてきました。特に白地の中間グレー本文を過大評価し、非常に 明るい背景の負荷を過小評価する点が指摘されています。WCAG 3 (2021 年以来ワーキングドラフト) は APCA (Advanced Perceptual Contrast Algorithm) を後継として提案しており、対称的な比では なく極性に敏感な Lc 値を出力します。範囲は約 -108 〜 +106 で、 暗色 on 明色なら正、明色 on 暗色なら負となります。

APCA はまだ規範的標準ではありません。当面は WCAG 2.1 の比に 基づく AA / AAA が多くの規制で運用されており、本ツールもその 比を計算します。WCAG 3 が確定すると推奨水準は Lc 値で表現され (例: 本文に Lc 75)、新旧両方式の併存期にはデザイナーが両方で 検証する必要が生まれます。動向を追うなら WCAG ワーキング ドラフトと apcacontrast.com の参考実装を見守ってください。

使い方

前景色と背景色(HEX または RGB)を選ぶと、WCAG 2.1 の相対輝度公式に基づくコントラスト比が即時に計算されます。結果は 1.0(コントラストなし — 同色対同色)から 21.0(白地に黒)までの 1 つの数値で、5 つの閾値 — 3:1(大きいテキストの AA・UI 部品)、4.5:1(通常テキストの AA・大きいテキストの AAA)、7:1(通常テキストの AAA)— に対する合否バッジが付きます。両色のサンプルテキストのライブプレビューにより、数値と並べてレンダリング結果も確認できます。

ハンドオフ前のデザインレビュー、白や暗い背景と組み合わせるブランドカラーの選定、アクセシビリティ監査の指摘(「前景色のコントラスト不足」)のデバッグ、すべての色組に可読性ティアを定めるデザインシステムの構築などに使ってください。キャリブレーション済みディスプレイで「問題なし」に見えるデザインも、太陽の差し込むカフェのノートパソコン画面ではほぼ確実に WCAG を満たさなくなります — アクセシビリティ標準が想定するのはまさにそうした状況です。本ツールは WCAG 2.1 のコントラスト公式をブラウザ内で実行し、何もアップロードしません。

例

foreground: #06B6A4
background: #FFFFFF

Contrast: 2.51 : 1
Normal text AA (4.5): ✗ fail
Large text AA (3.0): ✗ fail
UI component (3.0):  ✗ fail

foreground: #FFFFFF
background: #055F58

Contrast: 7.51 : 1
Normal text AA (4.5): ✓ pass
Normal text AAA (7): ✓ pass
UI component (3.0):  ✓ pass

foreground: #B0B0B0
background: #FFFFFF

Contrast: 2.30 : 1
Normal text AA (4.5): ✗ fail
Large text AA (3.0): ✗ fail

よくある質問

関連する概念

WCAG(Web Content Accessibility Guidelines、W3C)はウェブアクセシビリティの国際標準です。WCAG 2.0(2008 年)は 4 つの POUR 原則(知覚可能・操作可能・理解可能・堅牢)と AA / AAA の準拠レベルを導入しました。WCAG 2.1(2018 年)はモバイルや低視力向けの基準を追加し、WCAG 2.2(2023 年 10 月)はフォーカス表示・ドラッグ操作・アクセシブルな認証を追加しました。コントラスト要件(SC 1.4.3 最低限のコントラスト、SC 1.4.6 強化されたコントラスト)は約 50 ある成功基準の 1 つに過ぎませんが、純粋に測定可能であるため最も引用されます。

**コントラスト比公式** は 3 ステップで動きます。(1)各 sRGB チャンネルを線形化 — sRGB はガンマエンコードされており(値 128 は線形光の約 21.6% を表し、50% ではありません)、チャンネルは sRGB 伝達関数で反転されます。(2)`0.2126·R + 0.7152·G + 0.0722·B` の重みで相対輝度を計算します。重みは CIE 1931 観察者データから導出され、人間の錐体細胞が緑に最も敏感であることを反映しています。(3)明るい色を上にして `(L1 + 0.05) / (L2 + 0.05)` で比率を計算します。定数 `0.05` は画面の環境光反射を近似します。出力は 1.0(コントラストなし)から 21.0(理論上の白地に黒)に収まります。

アクセシビリティ作業を取り巻く 3 つの隣接概念があります。**WCAG 3 / APCA**(策定中)は 2.x の比率を知覚的コントラストスコアに置き換える予定です。**色覚安全性** は別の軸です — コントラストは輝度を測り、色覚特性のあるユーザは輝度を正常に知覚するため、見落とされるのは色相のみで伝えられる情報(WCAG SC 1.4.1 が対象)です。**フォーカス可視性**(SC 2.4.7、2.4.11)はフォーカスインジケータ自身が隣接背景に対して固有のコントラストを持つことを要求します。フォーカス状態を単独で確認し、実際にレンダリングされる周辺との対比を見落としがちな点に注意してください。これらは可視出力側のアクセシビリティを覆い、支援技術(スクリーンリーダ・音声操作・スイッチ入力)の軸は別に検討する必要があります。